JavaScript 应用开发 #2:视图与模板

在用 Backbone 开发的 JavaScript 应用里面,除了模型与集合以外,另一个重要的部分就是视图,英文是 View 。在视图里面,我们可以去监听在页面上发生的事件,还有与视图相关的模型和集合的事件,可以去定义处理这些事件用的方法,可以设置包装数据用的元素等等。

模型视图

下面, 先去为 Todo 这个模型的数据创建一个视图,定义这个视图的代码放在 js/Views/TodoView.js 这个文件里面。打开这个文件,输入下面这些代码:

var app = app || {};

/**
 * 视图 View
 *
 * 为任务模型创建的视图 - TodoView
 */
app.TodoView = Backbone.View.extend({

    // 设置视图的 el 属性的标签
    tagName: ‘li‘,

    // 创建一个模板来组织任务模型数据
    itemTemplate: _.template($(‘#item-template‘).html()),

    // 设置视图 el 属性里的具体内容
    render: function() {
        this.$el.html(this.itemTemplate(this.model.attributes));
        return this;
    }
});

这里的 app.TodoView 就是我们为 Todo 这个模型定义的视图。在 Backbone 里面,创建一个视图可以让它等于 Backbone.View.extend 。

在这个视图里面,设置了一下 tagName 这个属性,它的值就是这个视图的 el 属性的包装元素。另外,你还可以设置 className ,id ,或者 attributes 属性,去在这个包装元素上面添加 css 类名,id,还有其它的属性。attributes 这个属性的值是一个对象,在这个对象里面,你可以去设置想要添加到这个包装元素上面的属性的名字,还有对应的值。

itemTemplate,这是为任务这个模型设计的一个模板,在 Backbone 里面,可以使用第三方提供的模板功能,比如 Mustache,Handlebars,Underscore 的 Template功能等等。在下面,我们会用到 Underscore 的模板功能为任务模板创建一个模板。先继续往下看。

接着我们又在视图里面,添加了一个 render 方法。这个方法可以设置一下与显示相关的逻辑。在这里,去设置了一下任务这个模型的显示,用视图的 el 元素包装了一下用定义好的模板处理好的内容。最后用了一个 return this ,这样我们可以继续使用链式调用的方式去使用其它的方法与属性。

模板

先回到应用的主页:index.html,在这里,找一个地方去为任务模型定义一个模板,这个模板就是在上面定义的任务的视图里面用到的那个。在 index.html 这个文档的 body 标签里面,可以随便找一个地方,然后输入下面的代码:

    <!-- 任务模型的模板 -->
    <script type="text/template" id="item-template">
        <div class="view">
            <input type="checkbox" class="toggle" <%= completed ? ‘checked‘ : ‘‘ %>>
            <label><%= title %></label>
        </div>
    </script>

我们把模板定义在了一组 script 标签里面,在这个标签上,添加了一个 type="text/template" ,它的作用就是不让浏览器认为它里面的东西是 JavaScript 的代码,这样浏览器会忽略掉这些 script 标签里面的东西。

在这组 script 标签里面,id 这个属性的值,可以认为是这个模板的名字。在这里就是 item-template ,在视图里面,需要用到这个 id 来定位这组 script 标签里面的内容,也就是模板的具体的内容。

模板的结构就是先用了一组 div 标签,上面有一个叫 view 的 css 类。然后在它里面,先是一个 checkbox 类型的 input 元素,也就是一个复选框,它的作用就是改变任务的完成的状态,勾选了复选框,表示任务已经完成了,没勾选的话,就表示任务没有完成。

在这个复选框里面,用了一组特殊的标记:<%=  ... %> ,这是 Underscore 的模板功能要用到的特殊的标记,表示在这里要输出点东西,在这里,我们先判断了一下completed 这个东西的值,它的值要在视图里面传递进来。如果 completed 的值是 true 的话,就在这个复选框元素上,添加一个 checked 属性,表示勾选了这个复选框。如果 completed 的值是 false 的话,就不会在这个复选框上添加这个 checked 属性。

label 元素里面,同样用了一组特殊标记,要输出的东西叫做 title ,也就是任务的标题,它的值,也需要在视图里面传递进来。

在视图里使用模板

再回到 TodoView.js 这个文件来看一下 app.TodoView 这个视图。先看一下这行代码:

itemTemplate: _.template($(‘#item-template‘).html()),

它的作用就是在视图里定义了一个模板的方法,叫 itemTemplate ,定义它的时候,用到了 Underscore 的模板功能(_.template),我们需要把定义好的模板的具体的内容交给这个 _.template 方法,所以,我们用到了 jQuery 来找到在页面上包含 #ite-template 这个 id 的元素,也就是在 index.html 文档里面为任务模型创建的模板,定位到这个元素以后,又调用了 jQuery 的 html 这个方法来得到这个元素里面的具体的内容。

有了这个模板的方法以后,我们就可以用它去组织一下模型的内容了。需要把模板里面需要的几个东西交给这个模板的方法。在这里就是,你需要告诉模板,completed 的值是什么,title 的值是什么。告诉它以后,模板的方法就会用具体的这个值来替换掉在模板里面的特殊标记里的东西。

再看一下在视图的 render 这个方法里面的这行代码:

this.$el.html(this.itemTemplate(this.model.attributes));

this.$el,this 表示当前的这个视图,用它的 $el ,这个 $el 是用 jQuery特效 包装之后的视图的 el 属性的一个简单的写法,这样我们就可以使用其它的方法去处理这个 el 属性里面的东西了。在这里,用到了 html 这个方法,去设置了一个它里面的具体的内容。这个内容就是用定义好的模板处理之后的模型的内容。

this.itemTemplate ,使用当前视图的 itemTemplate 这个模板方法,然后把模板需要的内容交给了这个方法。this.model.attributes ,可以得到与当前视图相关的模型里面的属性,在我们定义的 Todo 这个模型里面,包含 title 属性,还有 completed 属性,这些属性的值,就是在定义好的模板里面要用到的。

练习

到现在,你可能还是有些模糊。下面, 通过一些练习,再来理解一下,视图的作用,模板是什么,视图里的 el 属性是什么,视图的 render 方法又有什么作用。

用 Chrome 浏览器打开应用的主页 index.html,打开浏览器的控制台(Mac:alt + command + J,Win:alt + ctrl + J),然后:

1. 先在控制台新建一个任务的模型。

var todo_1 = new app.Todo({title: ‘学习 Backbone‘, completed: false})

在上面,我们创建了一个叫 todo_1 的任务模型,在创建它的时候,给它指定了一下 title 还有 completed 这两个属性的值。

2. 然后访问一下这个新建的模型里面的属性。

todo_1.attributes

你会看到在创建模型的时候,为模型设置的属性。得到的是一个对象,里面的内容就是模型的属性还有对应的值。

3. 再去创建一个任务模型的视图。

var todoView = new app.TodoView({model: todo_1})

在创建这个任务模型的时候,我们为它指定了一个相关的模型,这个模型就是最开始创建的那个 todo_1。

4. 访问一下视图的 el 属性。

todoView.el

因为还没有使用视图的 render 方法,所以,默认视图的 el 属性就是一组标签,在创建视图的时候,我们设置了一下 tagName 这个属性,指定了 el 属性的标签为 li ,所以,在这里,你会看到给我们返回来的就是一组 li 标签。

5. 调用视图的 render 方法。

todoView.render()

在视图的 render 方法里面,我们为视图的 el 属性设置了具体的内容,所以,在调用视图的这个 render 方法以后,就会用设计好的内容填充到这个 el 属性的包装元素里面。

6. 再次访问一下视图的 el 属性。

todoView.el

现在,你看到的,就是渲染之后的视图的 el 属性的值。得到的就是用设置好的包装元素(li)包装的并且用模板组织好的模型的内容。

JavaScript 应用开发 #2:视图与模板源码搜藏网整理,转载请注明出处http://www.codesocang.com/jiaocheng/js/9786.html

JavaScript 应用开发 #2:视图与模板

时间: 2024-10-13 19:20:45

JavaScript 应用开发 #2:视图与模板的相关文章

Javascript MVC 学习笔记(三) 视图和模板

模板 Javascript中模板的核心概念是,将包含模板变量的HTML片段和Javascript对象做合并,把模板变量替换为对象中的属性值. 书中讲到了几种库作为模板引擎,但是链接失效了,可以在这里下载,链接:jQuery.tmpl 使用方式很简单,看一下它的说明就行了.给定一个模板,通过给它添加数据就能生成渲染好的元素节点,然后就可以将它添加到页面中,主要使用方法如: //数据 var object = { url: "http://example.com", getName: fu

JavaScript 应用开发 #1:理解模型与集合

在 < Backbone 应用实例 > 这个课程里面,我们会一起用 JavaScript 做一个小应用,它可以管理任务列表,应用可以创建新任务,编辑还有删除任务等等.这个实例非常好的演示了使用 JavaScript 来开发富应用,它也能让你对 JavaScript 有一个更好的理解.所以,我们接下来会分成几天,把这个小应用的功能,分成几个部分,介绍每个小功能的细节.跟着这篇文章,或者 < Backbone 应用实例 > 这个课程,动手练习一下.效果会非常好. 在文章里面,我会把需要

JavaScript 应用开发 #3:应用的主视图

目前为止,我们已经在应用里面,创建了表示数据的模型,表示数据列表的集合,组织模型显示的视图与模板.下面, 我们要想办法,去把模型的列表显示在应用的界面上.这样我们就可以再去为应用创建一个主要的视图,用它来控制应用的主要的显示. 应用视图 这个应用的主视图可以放在 js/Views/AppView.js 这个文件里面.AppView 就是应用的主视图,在这个视图里面,处理了应用需要的大部分的逻辑.在这里,也需要去监听一些事件,去定义一些方法,比如处理创建新任务的方法,把任务项目添加到页面上显示的方

JavaScript 应用开发 #5:为完成的任务添加样式

判断一下任务的状态,如果是完成的任务,可以在任务项目的上面,添加一个额外的 css 类,在这个 css 类里,可以去定义完成的任务的样式.比如,把文字的颜色变成浅友色,并且在文字上面添加一条删除线.这些样式,已经在应用的样式表里定义好了,放在了一个叫 .completed 的 css 类里面.下面,我们要做的就是把这个类添加到是完成的状态的任务项目上去. 要解决的问题 怎么样得到模型的属性的值. 怎么样为模型添加合适的 css 类. 怎么样在任务模型的完成状态发生变化时,立即更新任务项目的显示.

JavaScript 应用开发 #4:切换任务的完成状态

在勾选了任务项目左边的对号(复选框)以后,会将任务的状态标记为已完成,取消勾选的话,又会把任务的状态标记为未完成.所以, 我们需要一个可以切换任务完成状态的方法.在任务模型里面,表示任务状态的属性是 completed,它的值是 true 表示任务是完成的,如果是 false 就表示任务是未完成的,这个切换完成状态的方法其实就是去修改这个 completed 属性的值. 实现这个功能,可以去监听任务项目的这个复选框的点击的事件,每次点击都会去执行一个方法,这个方法做的事就是保存与任务当前的 co

ionic之AngularJS扩展 移动开发(视图导航一)

目录: 内联模板 : script 路由机制 : 状态机 导航视图 : ion-nav-view 模板视图 : ion-view 导航栏 : ion-nav-bar 回退按钮 : ion-nav-back-button 内联模板 : script 可能你没有注意过,HTML中常用的script标签在AngularJS中被重新定义了: 除了原来的脚本声明功能之外,如果script元素的type属性 定义为text/ng-template,则被称为内联模板.例如: <script type="

Django框架(四):视图、模板

1. 视图 后台管理页面做好了,接下来就要做公共访问的页面了.当我们刚刚在浏览器中输入http://127.0.0.1:8000/admin/之后,浏览器显示出了后台管理的登录页面,那么服务器是如何找到这个页面并返回的呢./admin/是我们想要请求的页面,服务器在收到这个请求之后,就一定对应着一个处理动作,这个处理动作就是帮我们产生页面内容并返回回来,这个过程是由视图来做的. 对于django的设计框架MVT,用户在URL中请求的是视图,视图接收请求后进行处理,并将处理的结果返回给请求者. 1

Javascript模块化开发 – AMD规范

通行的Javascript模块规范共有两种:CommonJS和AMD. 2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程.这标志"Javascript模块化编程"正式诞生.因为老实说,在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限:但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程. node.js的模块系统,就是参照CommonJS规范实现的.在CommonJS中,有一个全局性

[转]iOS开发之视图控制器(UIViewController)

视图控制器应该在MVC设计模式中扮演控制层(C)的角色,UIViewController的职责对内管理与之关联的View,对外跟其他UIViewController通信和协调.一个视图控制器管理一个视图(它可以有子视图),其view属性指向它所管理的视图.UIViewController类可以有子类,可以使用一个系统的UIViewController子类或者直接自己创建一个UIViewController的子类. 使用代码创建控制器和视图. 开始创建一个基于窗口的Empty Applicatio