视图渲染

<!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. JavaScript重点记忆

    String的常用方法 indexOf() 返回字符串中检索指定字符第一次出现的位置 lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置 match() 找到一个或多个正则表达式的 ...

  2. 【bzoj4240】有趣的家庭菜园

    只要统计每一个左右分别有多少比他高的去min,然后求和 #include<algorithm> #include<iostream> #include<cstdlib&g ...

  3. python dictionary的遍历

    d = {'x':1, 'y':3, 'z':2} for k in d:    print d[k] 直接遍历k in d的话,遍历的是dictionary的keys. 2 字典的键可以是任何不可变 ...

  4. redis的图形界面管理工具

    大部分人都知道redis是一款用在缓存服务器上的软件,它与memcache类似,都可以存储海量的数据,用在大访问量的web网站.聊天记录存放等方面,但是又与memcache不同: 1.缓存数据可以持久 ...

  5. JS/TS 的 import 和 export 用法小结

    ES6 export 和 export default的区别 昨天帮一个网友解决一个typescript的问题,看了一下,归根结底还是对js的import和export用法的不熟悉.让我想起来当年学这 ...

  6. VPS 安全措施（CentOS 6）

    新到手一台VPS,要做的第一件事大概是做好安全措施. 下面针对CentOS 6随便写点,我目前做的几步是: 修改root密码 SSH-key登录 配置iptable 安装fail2ban 1.修改ro ...

  7. 【旧文章搬运】Windows句柄表分配算法分析(三)

    原文发表于百度空间,2009-03-30========================================================================== 三.当需要 ...

  8. asp.net MVC 单选按钮的使用

    单选按钮的标准的html 语法 <form><input type="radio" name="sex" value="male&q ...

  9. android:singleLine="true" 的意思（转载)

    转自:http://blog.sina.com.cn/s/blog_72fad6270100tq0n.html 设置单行显示.如果和layout_width一起使用,当文本不能全部显示时,后面用“…” ...

  10. E20180408-hm

    interaction  n. 互动; 一起活动; 合作; 互相影响; interface n. 界面; <计>接口; 交界面;   v. (使通过界面或接口) 接合,连接; [计算机] ...