`
zccst
  • 浏览: 3319295 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

backbone.js的模板与el、render的关系

阅读更多
作者:zccst

分三种情况:
第1种:不使用任何框架
第2种:使用Hogan框架
第3种:使用mustache框架
..
第N种:使用underscore的_.template


一、不使用任何框架
var tmpDiv = $('<div></div>').append(createFeedTpl);

var View = Backbone.View.extend({
    el:"<div></div>",
    events:{},
    initialize:function(){
        this.render();
    },
    render:function(){
        this.$el.empty();
        this.$el.html(tmpDiv.find('#createFeedTemplate').html());
    }
});


二、使用hogan框架
var tmpDiv = $('<div></div>').append(createFeedTpl);
var createFeedTemplate = Hogan.compile(tmpDiv.find('#createFeedTemplate').html());//将其预编译
tmpDiv.remove();
var View = Backbone.View.extend({
    el:"<div></div>",
    events:{},
    initialize:function(){
        this.render();
    },
    render:function(){
        this.$el.empty();
        this.$el.html(createFeedTemplate.render());//createFeedTemplate有render方法,并且可以传参render(data)
    }
});


二、使用mustache框架
var tpl = require('crownSheetTpl');
//载入模板
$.Mustache.addFromString(tpl);
var View = Backbone.View.extend({
    events:{},
    initialize:function(){
        this.$el.empty().mustache('crownSheet-crownSheetEditor-Template', this.model.toJSON());//载入模板
    },
    
});


对于第三种情况,根本没有明设el的值,那么el是什么呢?
根据官方文档:
All views have a DOM element at all times (the el property), whether they've already been inserted into the page or not. In this fashion, views can be rendered at any time, and inserted into the DOM all at once, in order to get high-performance UI rendering with as few reflows and repaints as possible. this.el is created from the view's tagName, className, id and attributes properties, if specified. If not, el is an empty div.

简单说,就是如果你没有设置,那么系统将给你默认哪一个空div




如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    实例讲解JavaScript的Backbone.js框架中的View视图

    在学习JavaScript前端开发框架时,Backbone.js是一个不可忽视的工具,它帮助开发者构建单页面应用(SPA)。Backbone.js框架相对轻量级,它的核心在于模型(Models)、视图(Views)、集合(Collections)和路由...

    实例讲解JavaScript的Backbone.js框架中的View视图_.docx

    在Backbone.js中,View是用来呈现模型数据的部分,同时也是与用户交互的关键组件。View负责监听事件并对这些事件做出响应,同时还能渲染数据到DOM中。理解View的用途和工作原理对于开发高质量的应用程序至关重要。 ...

    Backbone.js的Hello World程序实例.docx

    总结来说,这个Backbone.js的Hello World实例展示了如何利用Backbone的核心组件(Model、View、Controller)与后端进行通信,以及如何使用模板引擎(Mustache)动态地展示数据。它是一个基本的单页应用(SPA)结构,...

    Backbone.js框架中简单的View视图编写学习笔记.docx

    Backbone.js是一款轻量级的JavaScript库,它引入了MVC(Model-View-Controller)设计模式,使得前端开发更加有组织和结构化。在Backbone.js中,View是负责处理DOM交互和用户事件的核心组件。以下是对Backbone.js框架...

    JavaScript_Application_Architecture_with_Backbone.js

    **Backbone.js**是一款轻量级的JavaScript库,其主要目标是分离业务逻辑与用户界面逻辑,从而使得应用结构更加清晰。以下是关于Backbone.js的一些关键特点: - **体积小巧**:整个库仅包含约1.29千行代码,易于理解...

    实例讲解JavaScript的Backbone.js框架中的View视图.pdf

    在JavaScript的Backbone.js框架中,View视图是构建用户界面的关键组件,它负责与DOM交互,呈现数据模型(Model)的状态,并响应用户的交互。在本文中,我们将深入理解Backbone.View的工作原理以及如何利用它来创建...

    实例讲解JavaScript的Backbone.js框架中的View视图.docx

    在JavaScript的Backbone.js框架中,View视图扮演着至关重要的角色,它是连接应用程序逻辑与用户界面的关键。View主要用于响应用户交互,管理DOM元素,并与Model进行数据同步。以下是对Backbone.js View视图的详细...

    Javascript MVC框架Backbone.js详解

    **el属性和$el属性**:在Backbone.js中,视图可以通过`el`属性与特定的DOM元素关联,这样视图就可以管理这个DOM元素。`$el`是一个jQuery对象,引用了相同的DOM元素,允许视图使用jQuery的方法操作DOM。例如: ```...

    简单了解Backbone.js的Model模型以及View视图的

    Backbone.js是一款流行的JavaScript库,它实现了MVC(模型-视图-控制器)模式,用于构建可维护性和可扩展性良好的前端应用。在Backbone.js中,Model和View是两个核心组件,它们分别负责数据管理和用户界面的呈现。 ...

    Backbone.js的Hello World程序实例

    在Web开发中,Backbone.js是一个流行的JavaScript库,用来构建单页应用程序。它为开发者提供了一套模型(Model)、视图(View)、集合(Collection)和路由器(Router)的框架,帮助组织代码结构,并与后端数据进行交互。...

    backbone 入门指南

    Backbone.js是一个轻量级的JavaScript库,它提供了MVC(Model-View-Controller)架构模式的基础实现,帮助开发者更好地组织复杂的Web应用程序。在传统的Web开发中,随着应用规模的增大,JavaScript代码往往会变得...

    BackBone介绍及使用

    Backbone与其他工具如jQuery、Underscore.js(提供实用函数库)、Handlebars(模板引擎)等配合使用,可以构建出功能强大的Web应用。例如,Underscore.js的模板功能可以让视图渲染更高效,而jQuery则简化了DOM操作。...

    Backbone制作联系人管理之列表(1)

    在本教程中,我们将探讨如何使用Backbone.js框架创建一...通过实际操作,你将更好地理解Backbone.js如何组织代码以及如何实现数据与视图的双向绑定。同时,这也会为你后续深入学习更复杂的Backbone应用打下坚实的基础。

    大规模JavaScript应用框架Thorax.zip

    使用 Backbone.js 应用架构和 Handlebars.js 模板技术。 Thorax 可作为独立的库使用,也基于 Node.js 和 Rails 运行。Thorax 为你提供了一些不同的插件用于表单处理、集合管理、事件管理以及移动支持等等。 ...

    浅析JavaScript MVC框架在Web开发中的应用.pdf

    $( '.content' ).html(view.render().el); } }); 在结语部分,JavaScript MVC框架仍然不够成熟,该领域正在发生快速的变化,缺少一致的认可的最佳实践。因此,在Web开发中,为了实现客户端代码的可读性、易测试、...

    tags:Backbone 的标签组件

    主干用户界面:标签任何网页的标签组件安装使用凉亭: bower install backbone.ui.tags依赖关系 (或替代事件处理程序)用法 var view = new Backbone.UI.Tags({el : "#tags",collection : new Backbone.Collection...

    backbone:初学者的脊梁

    Backbone.js 是一款轻量级的JavaScript库,它为构建复杂的Web应用提供了模型-视图-控制器(MVC)架构。作为一个初学者的脊梁,它帮助开发者组织代码,提高可维护性和可扩展性。本篇文章将深入探讨Backbone.js的基础...

    backbone-todo-app:简单的主干 todo 应用实践

    Backbone.js 是一个轻量级的 JavaScript 框架,它为创建复杂的 Web 应用程序提供了一种结构化的方法。它通过模型-视图-收藏(Model-View-Collection)的架构模式,帮助开发者管理数据和界面交互。在"backbone-todo-...

Global site tag (gtag.js) - Google Analytics