视图渲染

<!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. ivy

    ivy https://ant.apache.org/ivy/ Apache Ivy™ is a popular dependency manager focusing on flexibility ...

  2. spring cloud-服务注册

    正常的服务模块,注册到注册中心,让别的服务发现,调用服务 创建“服务提供方” 下面我们创建提供服务的客户端,并向服务注册中心注册自己. 假设我们有一个提供计算功能的微服务模块,我们实现一个RESTfu ...

  3. access函数的使用检查文件的权限【学习笔记】

    #include "apue.h" #include <fcntl.h> int main(int argc,char **argv) { ) err_quit(&qu ...

  4. 解决post乱码之web.xml

    <!-- 解决post乱码 --> <filter> <filter-name>characterEncodingFilter</filter-name> ...

  5. 使用JavaScript访问XML数据

    在本篇文章中,我们将讲述如何在IE中使用ActiveX功能来访问并解析XML文档,由此允许网络冲浪者操纵它们.这一网页将传入并运行脚本的初始化.你一定确保order.xml文档与jsxml.html在 ...

  6. Spring配置错误 No adapter for IAdvice of type

    参考:http://www.2cto.com/kf/201305/211728.html 错误十三 在配置拦截器后,运行的时候报错=> Error creating context 'sprin ...

  7. Java递归应用：输出树形菜单

    转自:https://blog.csdn.net/zhangzeyuaaa/article/details/24574769

  8. 关于 android 中 postDelayed方法的讲解 （转载）

    转自:http://blog.csdn.net/xiabo851205/article/details/7991529 这是一种可以创建多线程消息的函数 使用方法: 1,首先创建一个Handler对象 ...

  9. django QQ认证登录

    一.开发环境 django 1.10.2 python3.5.2 django-social-auth 0.3.6 二.申请QQ互联 APPID及SECRECT_KEY 大致步骤: 1.成为QQ互联开 ...

  10. hexo博客实现多终端共享&webhook自动化部署

    摘要:好不容易搭建了hexo,还不满足.想要实现在小程序上也能访问博客,又不想再写一个后台.每次更新文章到服务器之后,希望能自动同步到网站上面.如果你有这样的需求,那么希望这篇文章能帮助到你. 我的配 ...