视图渲染

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="jquery-1.9.1.js"></script>

    <script src="underscore.js"></script>

    <script src="backbone.js"></script>

</head>

<body>

    <div id="search_container"></div>

    <script type="text/template" id="search_template">

        <label><%= search_label %></label>

        <input type="text" id="search_input" />

        <input type="button" id="search_button" value="Search" />

    </script>

<script>

(function ($) {

    //此处添加下面的试验代码

    var SearchView=Backbone.View.extend({

        initialize:function(){},//初始化

        render:function(content){//渲染方法

            var template=_.template($('#search_template').html(),content);//模板解析

            $(this.el).html(template);//将解析后的代码片段添加到el中

        }

    });

    var searchView=new SearchView({//实例化一个视图

        el:$('#search_container')//指定el元素 （每个视图都会有el属性，如果不是我们指定，则backbone会自动生成一个div元素）

    });

    searchView.render({search_label:"搜索渲染"});//调用视图的渲染方法

})(jQuery);

</script>

</body>

</html>


需要注意的是在调用view.render的时候，需要给模板中所有的变量传值，不然会报错。关于$el，作者说是对view中元素的缓存，不明白这是什么意思，我感觉是jquery形式的el对象。

<ul>

<% _.each(labels, function(name) { %>

    <% if(name != "label2") {%>

    <li><%= name %></li>

    <% } %>

<% }); %>

</ul>
var SearchView = Backbone.View.extend({

    el: "#search_container",

    initialize: function(){

        var labels = ['label1', 'label2', 'label3'];

        this.render({labels: labels});

    },

    render: function(context) {

        //使用underscore这个库，来编译模板

        var template = _.template($("#search_template").html(), context);

        //加载模板到对应的el属性中

        $(this.el).html(template);

    },

});

var searchView = new SearchView();

这个例子与第一个类似，只不过它是在初始化的时候渲染了视图，并且el是在创建SearchView的时候设置的，模板也比第一个例子复杂点。

Backbone.js入门教程第二版笔记（3）的更多相关文章

  1. Backbone.js入门教程第二版笔记（1）

    1.模块 集合 视图 和事件的一个综合例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  2. Backbone.js入门教程第二版笔记（2）

    关于手动触发router,之前看到的例子都是通过在url后面加上#xxx或者点击一个a链接方法来触发, 还有一种情况是通过触发一种规则,来触发另一种规则(表述无能),比如这个例子中,我在url后面加上 ...

  3. Backbone.js入门教程

    原文: Getting Started with Backbone.js 不像其它的Web开发语言,过去Javascript很少可用的架构.令人感到高兴的是,最近几年这种情况得到非常大的改善. 今天我 ...

  4. D3.js 入门教程

    最近需要用到d3, 记录下d3的教程 网上搜了几个关于d3的教程 D3.js 入门教程      http://wiki.jikexueyuan.com/project/d3wiki/author.h ...

  5. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  6. python核心编程第二版笔记

    python核心编程第二版笔记由网友提供:open168 python核心编程--笔记(很详细,建议收藏) 解释器options:1.1 –d   提供调试输出1.2 –O   生成优化的字节码(生成 ...

  7. Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  8. 【CC2530入门教程-增强版】基础技能综合实训案例（基础版）-上位机源码

    [CC2530入门教程-增强版]基础技能综合实训案例(基础版)-上位机源码 广东职业技术学院  欧浩源 一.需求分析 按照指定参数打开串口,与测控终端建立数据传输通道,并根据应用要求实现程序逻辑,具体 ...

  9. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

随机推荐

  1. [git] csdn之code平台的使用

    简单的说一下GIT的使用.... 代码和托管平台是csdn刚出来没多久的code.csdn.net [中文的界面什么的简单点,好理解,嗯,易用....] Git 使用最新版:Git-1.8.4-pre ...

  2. JVM的CPU资源占用过高问题的排查

    互联网后端架构 https://mp.weixin.qq.com/s/LiqAy2DikbmZzqogb5XRdA JVM的CPU资源占用过高问题的排查 互联网后端架构  今天 上午线上某应用的一台J ...

  3. 编译spark源码 Maven 、SBT 2种方式编译

    由于实际环境较为复杂,从Spark官方下载二进制安装包可能不具有相关功能或不支持指定的软件版本,这就需要我们根据实际情况编译Spark源代码,生成所需要的部署包. Spark可以通过Maven和SBT ...

  4. 您可能试图从server上的安全浏览器訪问此站点。请启用脚本然后又一次载入此页。

    您可能试图从server上的安全浏览器訪问此站点.请启用脚本然后又一次载入此页.         我使用域Admin组的账户登入SharePoint2010的server,打开SharePoint首页 ...

  5. (23) java web的struts2框架的使用-struts动态调用和通配符

    一,动态查找 1,配置允许动态调用 <!-- 允许动态方法调用 --> <constant name="struts.enable.DynamicMethodInvocat ...

  6. XMU C语言程序设计实践（3）

    问题描述: 以一个n的长方阵表示迷宫,0和1分别表示迷宫中的通路和障碍,设计一个程序,对任意设定的迷宫,求出一条从入口到出口的通路,或得出没有通路的结论. 对于本问题需用栈实现“穷举求解”算法,即:从 ...

  7. Mybatis中的大于等于和小于等于

    mybatis中可以直接使用>或<:但是不能直接使用>=或<=; 第一种写法(1): 原符号 < <= > >= & ' " 替换符号 ...

  8. springboot 项目 docker化部署

    最近公司项目需要docker化,项目所使用的框架是springboot,linux环境.第一次接触docker化方面的技术.做的时候,所接触的新知识比较多,留下此文,以便以后用到的时候快速入手. 修改 ...

  9. UVA11613 Acme Corporation —— 最小费用流（流量不固定的最小费用流）

    题目链接:https://vjudge.net/problem/UVA-11613 题意: 商品X在第i个月内:生产一件需要花费mi元,最多可生产ni件,销售一件(在这个月内销售,而不管它是在那个月生 ...

  10. 字典树（Trie树） C++实现

    说明: 以下代码是个人按照自己的理解写的,可能有错误或者不太规范的地方,欢迎指出! 代码如下: //插入.删除.查询.遍历四种操作 //注意:四种操作的函数实现中,T都是指向上一个结点的指针,以此方便 ...