Knockoutjs实例 - 属性绑定(Bindings)之流程控制(Control flow)

一、foreach binding

使用此功能可以方便我们循环遍历输出某个数组、集合中的内容。

（1）、循环遍历输出数组

View Row Code

1 <script type="text/javascript" src="knockout-2.2.0.js"></script>
2  
3 <table>
4      <thead>
5          <tr><th>First name</th><th>Last name</th></tr>
6      </thead>
7      <tbody data-bind="foreach: people">
8          <tr>
9              <td data-bind="text: firstName"></td>
10              <td data-bind="text: lastName"></td>
11          </tr>
12      </tbody>
13 </table>
14   
15 <script type="text/javascript">
16      ko.applyBindings({
17          people: [
18              { firstName: ‘Bert‘, lastName: ‘Bertington‘ },
19              { firstName: ‘Charles‘, lastName: ‘Charlesforth‘ },
20              { firstName: ‘Denise‘, lastName: ‘Dentiste‘ }
21          ]
22      });
23 </script>

（2）、动态增加和删除遍历节点

View Row Code

1 <script type="text/javascript" src="knockout-2.2.0.js"></script>
2  
3 <h4>People</h4>
4 <ul data-bind="foreach: people">
5      <li>
6          Name at position <span data-bind="text: $index"> </span>:
7          <span data-bind="text: name"> </span>
8          <a href="#" data-bind="click: $parent.removePerson">Remove</a>
9      </li>
10 </ul>
11 <button data-bind="click: addPerson">Add</button>
12   
13 <script type="text/javascript">
14      function AppViewModel() {
15          var self = this;
16  
17          self.people = ko.observableArray([
18          { name: ‘Bert‘ },
19          { name: ‘Charles‘ },
20          { name: ‘Denise‘ }
21      ]);
22  
23          self.addPerson = function () {
24              self.people.push({ name: "New at " + new Date() });
25          };
26  
27          self.removePerson = function () {
28              self.people.remove(this);
29          }
30      }
31  
32      ko.applyBindings(new AppViewModel());
33 </script>

（3）、如果我们想要输出数组中的所有元素而不是像例一中使用firstName去指定元素的话，我们可以使用$data来进行输出。比如：

View Row Code

1 <script type="text/javascript" src="knockout-2.2.0.js"></script>
2  
3 <ul data-bind="foreach: months">
4      <li>
5          The current item is: <b data-bind="text: $data"></b>
6      </li>
7 </ul>
8   
9 <script type="text/javascript">
10      ko.applyBindings({
11          months: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘etc‘]
12      });
13 </script>

当然，我们也可以使用$data来调用数组中具体的元素，比如我们要使用$data调用例1中的firstName的话，我们可以使用$data.firstName来输出firstName。

（4）、使用$index、$parent等其他的上下文属性

我们曾在例2中使用了$index来表示我们数组的下标，$index是Knockoutjs为我们提供的属性，我们可以直接引用，它会随着数组等下标的变化动态变化的，比如如果数组的长度减少了1，$index的值也会跟着减少的。

我们也可以使用$parent来使用foreach元素之外的属性，比如：

View Row Code

1 <h1 data-bind="text: blogPostTitle"></h1>
2 <ul data-bind="foreach: likes">
3     <li>
4         <b data-bind="text: name"></b> likes the blog post <b data-bind="text: $parent.blogPostTitle"></b>
5     </li>
6 </ul>

这里使用$parent来调用foreach循环体之外的blogPostTitle属性。

（5）、使用"as"为foreach中的元素定义别名

我们可以使用$data来代替数组中的元素，同时我们也可以使用as来为我们要遍历的元素起一个别名。

View Row Code

1 <script type="text/javascript" src="knockout-2.2.0.js"></script>
2  
3 <ul data-bind="foreach: { data: categories, as: ‘category‘ }">
4      <li>
5          <ul data-bind="foreach: { data: items, as: ‘item‘ }">
6              <li>
7                  <span data-bind="text: category.name"></span>:
8                  <span data-bind="text: item"></span>
9              </li>
10          </ul>
11      </li>
12 </ul>
13   
14 <script>
15      var viewModel = {
16          categories: ko.observableArray([
17              { name: ‘Fruit‘, items: [‘Apple‘, ‘Orange‘, ‘Banana‘] },
18              { name: ‘Vegetables‘, items: [‘Celery‘, ‘Corn‘, ‘Spinach‘] }
19          ])
20      };
21      ko.applyBindings(viewModel);
22 </script>

在使用的时候我们要注意，起别名使用的是as:‘category‘而不是as:category。

（6）、在没有绑定属性的情况下使用foreach

有的时候我们想要循环输出一些特殊的内容，比如我们想要输入下面文本中的<li></li>标签：

View Row Code

1 <ul>
2      <li class="header">Header item</li>
3      <!-- The following are generated dynamically from an array -->
4      <li>Item A</li>
5      <li>Item B</li>
6      <li>Item C</li>
7 </ul>

如果我们想要循环输出上面代码中的<li></li>标签的话，我们就没有一个可以绑定foreach的元素，此时我们可以通过以下的代码来实现：

View Row Code

1 <script type="text/javascript" src="knockout-2.2.0.js"></script>
2  
3 <ul>
4      <li class="header">Header item</li>
5      <!-- ko foreach: myItems -->
6          <li>Item <span data-bind="text: $data"></span></li>
7      <!-- /ko -->
8 </ul>
9   
10 <script type="text/javascript">
11      ko.applyBindings({
12          myItems: [‘A‘, ‘B‘, ‘C‘]
13      });
14 </script>

我们使用<!--ko--><!--/ko-->来表示循环的开始和结束，这是一个虚拟的标签，Knockoutjs能够对其中的foreach进行绑定就好像你将foreach绑定到了一个真实的标签上一样。

（7）、默认不显示被标示为删除的元素

有的时候我们要跳过数组中的一些元素，此时这些元素已经被标示为删除，但并没有被真实删除，这些元素当我们使用foreach输出的时候是默认不显示的，如果我们想要这些元素显示的话，我们可以使用includeDestroyed这个选项，比如：

View Row Code

1 <div data-bind=‘foreach: { data: myArray, includeDestroyed: true }‘>
2     ...
3 </div>

二、if binding 和 if not binding

（1）、使用if binding可以控制某个组件动态显示，类似我们之前接触到的visible属性，不过此属性绑定过以后就不能更改，而if binding可以根据相应的条件控制组件是否显示，下面是一个简单的例子：

View Row Code

1 <script type="text/javascript" src="knockout-2.2.0.js"></script>
2  
3 <label><input type="checkbox" data-bind="checked: displayMessage" /> Display message</label>
4   
5 <div data-bind="if: displayMessage">Here is a message. Astonishing.</div>
6   
7 <script type="text/javascript">
8      ko.applyBindings({
9          displayMessage: ko.observable(false)
10      });
11 </script>

此例根据checkbox是否勾选来控制是否显示下面的一个<div>。

我们也可以使用if来判断某个元素是否为null，如果为null则不会显示，如下：

View Row Code

1 <script type="text/javascript" src="knockout-2.2.0.js"></script>
2  
3 <ul data-bind="foreach: planets">
4      <li>
5          Planet: <b data-bind="text: name"> </b>
6          <div data-bind="if: capital">
7              Capital: <b data-bind="text: capital.cityName"> </b>
8          </div>
9      </li>
10 </ul>
11   
12   
13 <script>
14      ko.applyBindings({
15          planets: [
16              { name: ‘Mercury‘, capital: null },
17              { name: ‘Earth‘, capital: { cityName: ‘Barnsley‘} }
18          ]
19      });
20 </script>

此例中如果capital为null，则不会进行显示。此时，如果没有if进行判断的话，则在使用capital.cityName时就会出错。

（2）、if not binding的使用方法和if binding的使用方法一样，这里就不作介绍了。

三、with binding

我们可以使用with binding来重新定义一个上下文绑定，比如：

View Row Code

1 <script type="text/javascript" src="knockout-2.2.0.js"></script>
2  
3 <h1 data-bind="text: city"> </h1>
4 <p data-bind="with: coords">
5      Latitude: <span data-bind="text: latitude"> </span>,
6      Longitude: <span data-bind="text: longitude"> </span>
7 </p>
8   
9 <script type="text/javascript">
10      ko.applyBindings({
11          city: "London",
12          coords: {
13              latitude: 51.5001524,
14              longitude: -0.1262362
15          }
16      });
17 </script>

这样我们在使用coords下的latitude和longitude的时候我们就不需要使用coords.latitude来调用了，因为我们使用with:coords来指定了coords的上下文，当我们使用coords下面的属性时就可以直接使用了。

下面提供一个动态交互的例子：

View Row Code

1 <script type="text/javascript" src="knockout-2.2.0.js"></script>
2  
3 <form data-bind="submit: getTweets">
4      Twitter account:
5      <input data-bind="value: twitterName" />
6      <button type="submit">Get tweets</button>
7 </form>
8   
9 <div data-bind="with: resultData">
10      <h3>Recent tweets fetched at <span data-bind="text: retrievalDate"> </span></h3>
11      <ol data-bind="foreach: topTweets">
12          <li data-bind="text: text"></li>
13      </ol>
14   
15      <button data-bind="click: $parent.clearResults">Clear tweets</button>
16 </div>
17   
18 <script type="text/javascript">
19      function AppViewModel() {
20          var self = this;
21          self.twitterName = ko.observable(‘@StephenFry‘);
22          self.resultData = ko.observable(); // No initial value
23  
24          self.getTweets = function () {
25              twitterApi.getTweetsForUser(self.twitterName(), function (data) {
26                  self.resultData({
27                      retrievalDate: new Date(),
28                      topTweets: data.slice(0, 5)
29                  });
30              });
31          }
32  
33          self.clearResults = function () {
34              self.resultData(undefined);
35          }
36      }
37  
38      ko.applyBindings(new AppViewModel());
39 </script>

以上就是流程控制的全部内容。

时间： 2024-08-28 07:31:40

Knockoutjs实例 - 属性绑定(Bindings)之流程控制(Control flow)的相关文章

CoreJavaE10V1P3.8 第3章 Java的基本编程结构－3.8 控制流程（Control Flow）

通过使用条件语句.循环语句可以实现流程的控制. 3.8.1 块作用域(Block Scope) 块(Block)就是由一对花括号包围起来的部分.他指定了一个变量的生存范围,与一个方法的操作范围. Java中不允许在嵌套块中重复定义变量. 3.8.2 条件语句 if (condition) statement { statement 1 statement 2 . . . } if (yourSales >= target) { performance = "Satisfactory&quo

异步流程控制之Async模块

一.Async模块介绍 Async是一个使用比较广泛的JavaScript异步流程控制模块,除了可以在Node.js上运行,还可以在浏览器端运行. Async模块提供了约20多个实用的函数来帮助我们理清在实用Node.js过程中各种复杂的回调. 二.Async函数介绍 Async的内容分为三部分: 流程控制(Control Flow):简化十种常见流程的处理 集合处理(Collections):如何使用异步操作处理集合中的数据 工具类(Utils):几个常用的工具类 1). 集合: Collec

Linux shell脚本流程控制

博主搬家至51CTO,初来乍到,请多指教. 此次我们来通过实例解析Linux shell脚本流程控制 Linux shell脚本流程控制可分为三类:顺序执行,条件选择执行,循环执行 顺序执行:简单理解就是逐行执行脚本内容,逐行解读,逐行执行.(此处不做实例解析) 条件选择执行:可以理解为先进行某一条件的判断选择,再决定执行怎样的脚本内容.常见语句if case 条件选择语句:if if语句用法: 单分支 if 判断条件;then 条件为真的分支代码 fi 双分支 if 判断条件; then 条件

part4-2 流程控制二（循环结构，while、for循环，列表推导式、生成器推导式，常用工具函数，控制循环结构，4个简单实例）

循环语句在循环条件满足时,可反复执行某一段代码,这段被重复执行的代码称为循环体.在循环体中,需要在合适的时候把循环条件设置为假,从而结束循环:否则循环一直执行下去形成死循环.循环语句通常包含如下4个部分.(1).初始化语句(init_statements):在循环开始前执行,有一条或多条语句,用于完成一些起初始化工作.(2).循环条件(test_expression):一个布尔表达式,决定是否执行循环体.(3).循环体(body_statements):循环的主体,根据循环条件是否允许,这个代码

Nodejs - 框架类库 - Nodejs异步流程控制Async

简介 Async是一个流程控制工具包,提供了直接而强大的异步功能 应用场景 业务流程逻辑复杂,适应异步编程,减少回调的嵌套 安装 npm insatll async 函数介绍 Collections each: 如果想对同一个集合中的所有元素都执行同一个异步操作. 1 var async = require('async'); 2 3 var t = require('./t'); 4 var log = t.log; 5 6 /** 7 * 8 * async提供了三种方式: 9 * 1. 集

异步流程控制-7行代码学会co模块

首先请原谅我的标题党(●-●),tj 大神的 co 模块源码200多行,显然不是我等屌丝能随便几行代码就能重写的.只是当今大家都喜欢<7天学会xx语言>之类的速效仙丹,于是我也弄个类似的名字<7行代码学会co模块>来博眼球. 为了避免被拖出去弹小JJ,还是先放出所谓的 7 行代码给大家压压惊: function co(gen) { var it = gen(); var ret = it.next(); ret.value.then(function(res) { it.next(

Welcome to Swift (苹果官方Swift文档初译与注解二十八)---199~208页(第四章-- 流程控制)

Value Bindings (绑定值) 在switch的case中可以绑定一个或者多个值给case体中的临时常量或者变量,这个成为绑定值. 代码样例: let anotherPoint = (2, 0) switch anotherPoint { case (let x, 0):   println("on the x-axis with an x value of \(x)") case (0, let y):   println("on the y-axis with

SpringMVC(二)——流程控制

SpringMVC主要就是用来做流程控制的,这篇博客总结一下如何在流程控制添加Interceptor(拦截器),如何将进行流程Mapping映射解析,如何编写Controller(控制器). 一,首先看一下框架中的映射解析器,用来将uri和控制器进行绑定的: 1,   SpringMVC框架的默认解析器采用是:bean的name属性名称作为URI,与控制器进行映射绑定,BeanNameUrlHandlerMapping.例如: [html] view plaincopyprint? <span 

Linux shell 流程控制（条件if,循环for,while）

Linux shell 流程控制(条件if,循环[for,while],选择[case]语句实例 linux shell有一套自己的流程控制语句,其中包括条件语句(if),循环语句(for,while),选择语句(case).下面我将通过例子介绍下,各个语句使用方法. 一.shell条件语句(if用法) if语句结构[if/then/elif/else/fi] if 条件测试语句 then action [elif 条件 action else action ] fi 如果对于:条件测试语句不是