Knockout学习之控制流绑定器
控制流绑定器
“foreach”绑定
顾名思义,通过该绑定我们就可以将监控数组循环输出到页面中去了,当然我们还是先来段简单的示例,仅仅只是输出监控数组:
<ul data-bind="foreach:people" >
<li data-bind="text:Name"></li>
</ul> <script type="text/javascript"> var appViewModel = function () {
this.people = ko.observableArray([
{ Name: "y-z-f" },
{ Name: "z-n" },
{ Name: "y-z-c" }
]);
} ko.applyBindings(new appViewModel());
</script>
通过这种方式我们可以将后台的表格改成采用ajax加载和翻页,但是还会有对应的删除等等操作,而且删除操作我们需要获取当前所选的项,获取这非常简单就可以解决,但是KO已经提供给我们现成的方式,那就是执行环境,通过$parent我们可以在后面通过点语法使用我们在视图模型中定义的函数,并且上下文环境自动就是当前所选的项,其实这个上下文其实就是你的函数中使用的this指向的是所选的数组的一项,下面我们将上面的代码改写,提供一个按钮可以在输出Name:
<ul data-bind="foreach:people" >
<li>
<span data-bind="text:Name" ></span>
<button type="button" data-bind="click:$parent.show">点我</button>
</li>
</ul> <script type="text/javascript"> var appViewModel = function () {
this.people = ko.observableArray([
{ Name: "y-z-f" },
{ Name: "z-n" },
{ Name: "y-z-c" }
]);
this.show = function () {
alert(this.Name);
}
} ko.applyBindings(new appViewModel());
</script>
读者可以在show函数中下断点,可以看到this的值是所选的那一项,是不是瞬间感觉很多事立马就简单了。但是我们还没有解决一个问题,如果上面只是简单的数组,我们该怎么输出里面的值呢?当然KO的设计者人不可能想不到这个,我们提供了$data用来访问,比如下面所示的代码:
<ul data-bind="foreach:people" >
<li>
<span data-bind="text:$data" ></span>
</li>
</ul> <script type="text/javascript"> var appViewModel = function () {
this.people = ko.observableArray([
"y-z-f",
"z-n",
"y-z-c"
]);
} ko.applyBindings(new appViewModel());
</script>
顺利输出内容,当然这里一样也可以使用$parent,当然在前面那个例子里$data一样也可以使用,在不嵌套的情况下这样做是没问题的,如果出现嵌套情况,并且外层循环和内层循环都存在一个Name属性就会有点绕了,所以KO还提供了as可以让我们起另外一个名字,而不使用$data,比如下面的嵌套循环:
<ul data-bind="foreach:{data:people,as : 'P'}" >
<li>
<span data-bind="text:P.Name" ></span>
<ul data-bind="foreach: { data: P.Names, as: 'S' }" >
<li>
<span data-bind="text:S.Name" ></span>
</li>
</ul>
</li>
</ul> <script type="text/javascript"> var appViewModel = function () {
this.people = ko.observableArray([
{ Name: "aaaa", Names: [{ Name: "a1" }, { Name: "a2" }] },
{ Name: "bbbb", Names: [{ Name: "b1" }, { Name: "b2" }] }
]);
} ko.applyBindings(new appViewModel());
</script>
这样看就清爽多了,而且在子循环里面一样可以使用父循环中的P,如果我想ul的第一个li是固定的,但是foreach是会把ul里面所有的li重新创建的,当然我们可以使用另外一个语法:
<ul>
<li>
aaaaaa
</li>
<!--ko foreach:{data:people,as : 'P'} -->
<li>
<span data-bind="text:P.Name" ></span>
<ul data-bind="foreach: { data: P.Names, as: 'S' }" >
<li>
<span data-bind="text:S.Name" ></span>
</li>
</ul>
</li>
<!--/ko -->
</ul> <script type="text/javascript"> var appViewModel = function () {
this.people = ko.observableArray([
{ Name: "aaaa", Names: [{ Name: "a1" }, { Name: "a2" }] },
{ Name: "bbbb", Names: [{ Name: "b1" }, { Name: "b2" }] }
]);
} ko.applyBindings(new appViewModel());
</script>
其中的语法在之前我们已经使用过了,所以在这里出现也不会奇怪,唯一的不同就是结束标签要放到需要循环的标签的尾部。
在之前学习监控属性的时候我们学习了destroy方法,但是这个方法并不会真的删除数据,而是会设置一个特殊的属性,那么问题就来了,如果我们通过destroy删除一项,那么foreach还会显示吗?实际情况是不会输出,当然我们也可以设置输出,比如下面的代码,即使我们点了删除但是还是会显示:
<ul>
<!--ko foreach:{data:people,as : 'P',includeDestroyed:false} -->
<li>
<span data-bind="text: P.Name"></span>
<a href="" data-bind="click: $parent.destroy">删除</a>
</li>
<!--/ko -->
</ul> <script type="text/javascript"> var appViewModel = function () {
var self = this;
this.people = ko.observableArray([
{ Name: "aaaa" },
{ Name: "bbbb" },
{ Name: "cccc" },
{ Name: "dddd" }
]);
this.destroy = function () {
self.people.destroy(this);
}
} ko.applyBindings(new appViewModel());
</script>
最后还要讲的就是回调,比如添加或者删除其实都是有对应的事件的,分别是afterRender,afterAdd,beforeRemove,beforeMode,afterMove。除了第一个事件以外,其他的事件都会有三个参数,分别是触发事件的项,项在数据在数组中的索引和数组本身。第一个事件接收的参数则是一组将要被插入的dom元素和对应被被绑定的数据项。
“if”绑定
有时我们需要控制页面标签的是否呈现,但是通过visible必须只能进行简单的控制,所以我们需要一个专门用来进行判断的绑定器,那就是if了,比如下面的示例,将通过一个Count监控属性控制元素是否呈现:
<!--ko if:count -->
<div>
<h1>终于见面了</h1>
</div>
<!--/ko -->
<div>
<button type="button" data-bind="click:add">增加</button>
<button type="button" data-bind="click:subtract">减少</button>
</div> <script type="text/javascript"> var appViewModel = function () {
this.count = ko.observable(0);
this.add = function () {
this.count(this.count() + 1);
console.log(this.count());
};
this.subtract = function () {
this.count(this.count()-1);
};
} ko.applyBindings(new appViewModel());
</script>
“ifnot”绑定
笔者就不单独介绍了,就是if反义。
“with”绑定
学习一定javascript一定知道with可以用来延长作用域,当然在KO中也基本类似。可以用来选定上下文环境,当然靠说还是没用,具体可以看一段代码:
<!--ko with:myArray -->
<div>
<h1>终于见面了<!--ko text:name --><!--/ko--></h1>
</div>
<!--/ko --> <script type="text/javascript"> var appViewModel = function () {
this.myArray = { name: "1", text: "123" };
} ko.applyBindings(new appViewModel());
</script>
通过代码就比较好里面了,用了with之后知道结束标签,这中间的上下文环境都是with后面指定的对象,比如上面的代码中直接用text绑定了name,而不是myArray.name。在某些场合下能减少不必要的输入。
Knockout学习之控制流绑定器的更多相关文章
- Knockout学习之模板绑定器
模板绑定器 如今页面结构越来越复杂,仅仅依靠foreach已经不足以我们的使用,这个时候我们就需要模板的存在,模板的优点自然很多,首先会让页面整洁,同时修改起来也可以方面的定位,最重要的是ko可以条件 ...
- knockout 学习使用笔记----绑定map--双向绑定
简单的方式,使用 knockout.mapping.js. 1.引入knockout.mapping.js. 2.声明模型 var model = { task:null, feedbacks:[], ...
- knockout 学习使用笔记------绑定值时赋值失败
在使用knockout绑定值的时候,发现无论怎么赋值都赋值失败,最后检查前端页面才发现,同一个属性绑定值的时候,绑定了两次,而在js中进行属性绑定的时候是双向绑定的,SO,产生了交互影响.谨记之. 并 ...
- C++11绑定器bind及function机制
前言 之前在学muduo网络库时,看到陈硕以基于对象编程的方式,大量使用boost库中的bind和function机制,如今,这些概念都已引入至C++11,包含在头文件<functional&g ...
- Knockout学习之表单绑定器(下)
“hasFocus”绑定 hasFocus绑定器会将DOM元素的焦点状态与视图模型中的属性相关联,当你设置视图模型中关联的属性为true或false后,将能够设置关键的DOM元素是否获得焦点. 比如下 ...
- Knockout学习之表单绑定器(上)
表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然 ...
- Knockout学习之文本和外观绑定器
文本和外观绑定器 “visible”绑定 该绑定主要用来让我们通过监控属性可以控制html文档的显示,只要绑定的监控属性为false.0.null或者undefined则隐藏该标签,否则显示.比如下面 ...
- Knockout.Js官网学习(模版绑定)
模板绑定器 如今页面结构越来越复杂,仅仅依靠foreach已经不足以我们的使用,这个时候我们就需要模板的存在,模板的优点自然很多,首先会让页面整洁,同时修改起来也可以方面的定位,最重要的是ko可以条件 ...
- C++11 学习笔记 std::function和bind绑定器
C++11 学习笔记 std::function和bind绑定器 一.std::function C++中的可调用对象虽然具有比较统一操作形式(除了类成员指针之外,都是后面加括号进行调用),但定义方法 ...
随机推荐
- LINUX CentOS7安装字体库
LINUX CentOS7安装字体库 2017年12月26日 17:06:07 q260996583 阅读数:4866更多 个人分类: linux JAVA画图时常用到Font 类对象 这样的对象 ...
- %date~0,4%和 %time~0,2%等用法详解(转)
比如在windowscmd命令行窗口执行date命令后这个环境变量的值为当前日期:2014-09-01 星期六 或2014/09/01 周六那么如下的各个操作的意义如下:%date:~0,4% 表示从 ...
- go语言之进阶篇通过range遍历channel内容
1.通过range遍历channel内容 package main import ( "fmt" ) func main() { ch := make(chan int) //创建 ...
- B/S架构中常用弹出方法 (转)
<一> 在B/S架构的项目中,为了提高项目的易用性,增强系统与用户的交互功能,一般使用弹出页面来为用户提供操作或数据选择帮助信息,比如,用户输入一个编码中某些字符,在弹出页面中显示所有包含 ...
- [leetcode]Search in Rotated Sorted Array II @ Python
原题地址:https://oj.leetcode.com/problems/search-in-rotated-sorted-array-ii/ 题意: Follow up for "Sea ...
- 如何在CentOS 7.2上创建NFS的Share,然后让Client可以访问
讲得详细清楚明白的好文. Setting Up an NFS Server and Client on CentOS 7.2 https://www.howtoforge.com/tutorial/s ...
- iOS开发-Launch Image和Launch Screen
Launch Image是App的启动图片,LaunchScreen是iOS8之后的功能,两者都可以设置app的启动图片.iOS8之后官方的推荐了使用Launch screen.xib,在xib的中通 ...
- google map放大缩小地图去除 ctrl+,直接用鼠标放大缩小
如图,最近突然需要ctrl+鼠标滚动,才可以放大缩小地图: 这个问题也困扰了我很久,这个解决办法也是在看到一个帖子才发现的,所以记录一下,如图: map = new google.maps.Map(d ...
- Java复习1-基本数据类型
数据类型 整形 type 存储 取值范围 int 4字节 -2 147 483 648 ~ 2 147 483 647 (超过20亿) short 2字节 -32 768 ~ 32 7677 long ...
- 实战HMM-Viterbi角色标注地名识别
http://www.hankcs.com/nlp/ner/place-names-to-identify-actual-hmm-viterbi-role-labeling.html 命名实体识别(N ...