模板绑定器

如今页面结构越来越复杂,仅仅依靠foreach已经不足以我们的使用,这个时候我们就需要模板的存在,模板的优点自然很多,首先会让页面整洁,同时修改起来也可以方面的定位,最重要的是ko可以条件式选择模板来呈现数据。下面我们将开始逐一的学习。

1.呈现一个简单的模板

常规的js我们需要写上去,如下所示:

  <script type="text/javascript">
$(function () {
var viewMode = {
datas: ko.observableArray({name:"123",value:123})
};
ko.applyBindings(viewMode);
});
</script>

然后我们在指定我们的模板:

 <script type="text/html" id="data-template" >
<div data-bind="text:name" ></div>
<div data-bind="text:value" ></div>
</script>

最后我们在页面中使用这个模板:

<div data-bind="template: {name:'data-template',data:datas}" ></div>

其中template就是我们今天的主角,name用来指定使用的模板名字,data是指定用来呈现的数据,然后我们在浏览器中查看。

2.利用”foreach”选项呈现模板

上面的方法只能用来呈现一条数据的,但是大多数实际应用中我们都需要按照一个模板循环呈现数据,那么我们就需要使用foreach选项。

首先我们先修改js,改成数组:

 <script type="text/javascript">
$(function () {
var viewMode = {
datas: ko.observableArray([{ name: "123", value: 123 }, { name: "456", value: 456 }])
};
ko.applyBindings(viewMode);
});
</script>

然后将上面的data改成foreach就可以,刷新页面,我们就可以看到结果了。

3.利用”as”重命名

这个选项在一般情况下我们不会使用,除非我们需要在模板中使用子模板的时候,这个as选项就非常有用,通过下面的例子我们看出具体的用法在哪:

 <div data-bind="template: {name:'data-template',foreach:datas,as:'t'}" ></div>

 <script type="text/html" id="data-template" >
<div data-bind="text: name" ></div>
<div data-bind="template: {name:'value-template',foreach:value}" ></div>
</script> <script type="text/html" id="value-template">
<div data-bind="text:t.name" ></div>
<div data-bind="text:$data" ></div>
</script> <script type="text/javascript">
$(function () {
var viewMode = {
datas: ko.observableArray([{ name: "123", value: [1, 2, 3, ] }, { name: "456", value: [4, 5, 6] }])
}; ko.applyBindings(viewMode);
});
</script>

我们定义了两个模板,分别为”data-template””value-template”,而”data-template”中又使用了”value-template”模板,”value-template”模板中使用t.name来访问上级的name其中t就是as的作用。

4.使用”afterRender”,”afterAdd”和”beforeRemove”事件

这几个事件就是用来在呈现模板的过程中响应不同的事件,并且还会传递对应的参数。下面我们改变上面的示例,响应afterRender事件,并输出对应的name,首先我们在data-bind中添加afterRender

<div data-bind="template: { name: 'data-template', foreach: datas, as: 't', afterRender: onRender }" ></div>

然后在js中添加一个函数:

     <script type="text/javascript">
$(function () {
var viewMode = {
datas: ko.observableArray([{ name: "123", value: [1, 2, 3, ] }, { name: "456", value: [4, 5, 6] }]),
onRender:function(ele,arg){
console.log(arg.name);
}
}; ko.applyBindings(viewMode);
});
</script>

5.动态选择模板

我们一开始也说了使用模板的另一个最大的好处就是可以动态的选择呈现的模板,这样对于某些外观差距很大,但是都属于同一个数据的情况下可以利用这个来实现,其实实现起来也很简单,我们只要在指定name的时候指定一个函数就可以,在呈现每个数据的时候会回调这个函数,并把当前的数据作为参数传递进来,然后我们就可以根据数据的具体情况来返回对应的模板名称了,比如下面的示例代码:

 <div data-bind="template: { name: templateName, foreach: datas}" ></div>

 <script type="text/html" id="data-template" >
<div>A</div>
<div data-bind="text: name" ></div>
</script> <script type="text/html" id="value-template">
<div>B</div>
<div data-bind="text:name" ></div>
</script> <script type="text/javascript">
$(function () {
var viewMode = {
datas: ko.observableArray([{ name: "123", value: [1, 2, 3, ] }, { name: "456", value: [4, 5, 6] }]),
templateName: function (ele) {
if (ele.name == "123") {
return "data-template";
} else {
return "value-template";
}
}
}; ko.applyBindings(viewMode);
});
</script>

最后我们可以看到会按照我们的条件来输出不同的模板了。

Knockout学习之模板绑定器的更多相关文章

  1. Knockout学习之控制流绑定器

    控制流绑定器 “foreach”绑定 顾名思义,通过该绑定我们就可以将监控数组循环输出到页面中去了,当然我们还是先来段简单的示例,仅仅只是输出监控数组: <ul data-bind=" ...

  2. KnockOut文档--模板绑定

    目的 模板绑定使用数据render模板,然后把渲染的结果填充到Dom树中.模板通过重复或嵌套块(通常为您的视图模型数据的函数)用一种简单,方便的方式来建立复杂的UI结构 . 有两种方式使用模板: Na ...

  3. knockout 学习使用笔记----绑定map--双向绑定

    简单的方式,使用 knockout.mapping.js. 1.引入knockout.mapping.js. 2.声明模型 var model = { task:null, feedbacks:[], ...

  4. knockout 学习使用笔记------绑定值时赋值失败

    在使用knockout绑定值的时候,发现无论怎么赋值都赋值失败,最后检查前端页面才发现,同一个属性绑定值的时候,绑定了两次,而在js中进行属性绑定的时候是双向绑定的,SO,产生了交互影响.谨记之. 并 ...

  5. 【Knockout.js 学习体验之旅】(3)模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  6. Knockout.Js官网学习(模版绑定)

    模板绑定器 如今页面结构越来越复杂,仅仅依靠foreach已经不足以我们的使用,这个时候我们就需要模板的存在,模板的优点自然很多,首先会让页面整洁,同时修改起来也可以方面的定位,最重要的是ko可以条件 ...

  7. C++11绑定器bind及function机制

    前言 之前在学muduo网络库时,看到陈硕以基于对象编程的方式,大量使用boost库中的bind和function机制,如今,这些概念都已引入至C++11,包含在头文件<functional&g ...

  8. Knockout学习之表单绑定器(下)

    “hasFocus”绑定 hasFocus绑定器会将DOM元素的焦点状态与视图模型中的属性相关联,当你设置视图模型中关联的属性为true或false后,将能够设置关键的DOM元素是否获得焦点. 比如下 ...

  9. Knockout学习之表单绑定器(上)

    表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然 ...

随机推荐

  1. JS 計算文本域還能輸入多少個字符

    //輸入計數 //count:能輸入的數據總量    function Calculation(v, count) {        var span = $(v).next();        va ...

  2. regression build test

    Q: 什么是regression test以及为什么做regression test? A: fixing1进到build之后,QA/tester要进行手动测试,也可能会写automation.但是随 ...

  3. EMR,电子病历(Electronic Medical Record)

    电子病历 电子病历(EMR,Electronic Medical Record),也叫计算机化的病案系统或称基于计算机的病人记录(CPR,Computer-Based Patient Record). ...

  4. 8天掌握EF的Code First开发系列之2 简单的CRUD操作

    本文出自8天掌握EF的Code First开发系列,经过自己的实践整理出来. 本篇目录 创建控制台项目 根据.Net中的类来创建数据库 简单的CRUD操作 数据库模式更改介绍 本章小结 本人的实验环境 ...

  5. IE中无法执行JS脚本 解决WINDOWS SERVER 2008弹出INTERNET EXPLORER增强安全配置正在阻止来自下列网站的内容

    在默认状态下,使用Windows Server 2008系统自带的IE浏览器访问网页内容时,我们时常发现“Internet Explorer增强安全配置正在阻止来自下列网站的内容”的提示导致不能打开网 ...

  6. 用Javascript取float型小数点

    用Javascript取float型小数点后两位,例 var a = 12.2369826取成12.23,如何做?下面四种方法可用 (1)     var str = a.substring(0,s. ...

  7. 循序渐进Python3(六) -- 初识内置变量、反射、递归

    #python用下划线作为变量前缀和后缀指定特殊变量.稍后我们会发现,   #对于程序来说,其中的有些变量是非常有用的,而其他的则是未知或者无用的.   #我们总结一下Python中下划线的特殊用法  ...

  8. jqGrid学习笔记(一)

    3.2.body中的代码 <!-- jqGrid table list4 --> <table id="list4"></table> < ...

  9. DataTable 怎样设置列宽? DataTable中已经有数据了怎样在现实的时候设置它的列宽?

    首先要理解 DataTable是一个虚拟表,里面存有数据列,既然是虚拟的就不能够为它去设置宽度,如果设置的话可以对其绑定的控件进行设置.例如:绑定的控件对象为DataGridView那么可以这样 da ...

  10. frame和bounds的区别与联系

    首先先看一下下面两个属性的代码实现: -(CGRect)frame{ return CGRectMake(self.frame.origin.x,self.frame.origin.y,self.fr ...