视图渲染

<!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. mac的终端窗口的工作组的使用

    1.打开终端,打开多个tab,分别进入目录, 2.点击窗口,将窗口存储为组,弹窗如下图 可以勾选恢复所有命令,存储 3.下次使用时,点击窗口,打开工作组即可

  2. android 图片内存问题

    在android开发过程中,经常遇到oom的问题,原因有很多种,其中最难处理的是图片造成的oom,于是在网络上对比了几个图片加载的库,最终选择了Facebook的fresco库(github地址:ht ...

  3. strong and weak 强引用和弱引用的差别

    (weak和strong)不同的是 当一个对象不再有strong类型的指针指向它的时候 它会被释放  ,即使还有weak型指针指向它. 一旦最后一个strong型指针离去 .这个对象将被释放,全部剩余 ...

  4. 计算机学院大学生程序设计竞赛（2015’12）The Magic Tower

    The Magic Tower Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  5. WAS：节点不同步问题

    刀片服务器硬盘坏了,换了硬盘后,通过dmgr无法重启该节点上的server. 单机./starServer 后,服务虽然启动了,但后台一直提示如下: [-- ::: CST] RoleViewLead ...

  6. 用mkdirs创建目录

    import java.io.*; class a { public static void main(String args[]) { createDir("c:/fuck"); ...

  7. Python3中使用PyMongo的方法详解

    前言 本文主要给大家介绍的是关于在Python3使用PyMongo的方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细介绍: MongoDB存储 在这里我们来看一下Python3下Mongo ...

  8. apple-touch-startup-image 制作iphone web应用程序的启动画面

    为ipad制作web应用程序的启动画面时发现个问题,只能显示竖屏图,横屏图出不来,如下: 首先页面头部里要加入(这个是APP启动画面图片,如果不设置,启动画面就是白屏,图片像素就是手机全屏的像素) & ...

  9. 使用putty连接虚拟机上的centos提示Network:connection refused

    转自:https://yeyuan.iteye.com/blog/1266484 今天早上开机之后,像往常一样使用putty连接linux的时候,突然提示Network:connection refu ...

  10. #define WM_COMM_BREAK_DETECTED WM_USER+1

    一.#define WM_COMM_BREAK_DETECTED WM_USER+1定义一个用户自定义消息WM_COMM_BREAK_DETECTED,它是自定义消息,非系统消息 为了防止用户定义的消 ...