MVVM架构~knockoutjs系列之数组的$index和$data

时间:2022-09-29 00:12:13

返回目录

已经写了很多knockoutjs的文章了,今天在review代码时,忽然看到一个问题,在knockout环境下,如何遍历一个简单的数组?对于遍历对象组件的数组来说,很容易,直接foreach:对象名,然后进行属性的绑定即可,而如下数据[10,20,30]这种简单的数组,如何去遍历呢?在阅读knockout官网后,找到了答案,如下实例:

 <label>博主</label>
<div data-bind="text:User.title"></div>
<label>地域</label><div data-bind="text:User.address"></div>
<label>所经历的等级 </label>
<ul data-bind="foreach:Level">
<li>索引:<span data-bind="text: $index"></span>,数值:<span data-bind="text: $data"></span></li>
</ul>
<label>所购买的 </label>
<div data-bind="foreach:SaleDetail">
[<span data-bind="text:id"></span>]&nbsp;&nbsp;<span data-bind="text:memo"></span>&nbsp;&nbsp;[<a href="javascript:;" data-bind="click:$parent.remove">移除</a>]<hr />
</div>
<script type="text/javascript">
var Demo = function () {
var self = this;
self.User = { title: "test knockout js", address: "beijing" };
self.Level = [, , , , ];
self.SaleDetail = ko.observableArray([
{ id: , memo: '2005-01,消费购买了水壶' },
{ id: , memo: '2006-03,消费购买了手机' },
{ id: , memo: '2006-10,消费购买了手机' }
]); for (var i = ; i < ; i++) {
self.SaleDetail.push({ id: i + , memo: '2005-01,消费购买了水壶' })
} self.remove = function () {
self.SaleDetail.remove(this);
}
} ko.applyBindings(new Demo());
</script>

重要看一下HTML部分

aaarticlea/png;base64,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" alt="" />

其中$index表示为组件的索引值,它从0开始,$data表示这个索引对应的具体的值,看一下程序运行结果的截图

aaarticlea/png;base64,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" alt="" />

返回目录

MVVM架构~knockoutjs系列之数组的$index和$data的更多相关文章

  1. MVVM架构~knockoutjs系列之表单添加(验证)与列表操作源码开放

    返回目录 本文章应该是knockoutjs系列的最后一篇了,前几篇中主要讲一些基础知识,这一讲主要是一个实际的例子,对于一个对象的添加与编辑功能的实现,并将项目源代码公开了,共大家一起学习! knoc ...

  2. MVVM架构~Knockoutjs系列之验证机制的引入

    返回目录 对于Knockoutjs本身来说,没有提供验证模块,不过,有第三方的扩展,就像你为jquery库作extensions一样,这讲中我将介绍一个Knockout插件扩展,knockout.va ...

  3. MVVM架构~knockoutjs系列之为Ajax传递Ko数组对象

    返回目录 一些要说的 这是一个很有意思的题目,在KO里,有对象和数组对象两种,但这两种对象对外表现都是一个function,如果希望得到他的值,需要进行函数式调用,如ko_a(),它的结果为一个具体值 ...

  4. MVVM架构~Knockoutjs系列之text&comma;value&comma;attr&comma;visible&comma;with的数据绑定

    返回目录 Knockoutjs是微软mvc4里一个新东西,用这在MVC环境里实现MVVM,小微这次没有大张旗鼓,而是愉愉的为我们开发者嵌入了一个实现MVVM的插件,这下面的几篇文章中,我和大家将一起去 ...

  5. MVVM架构~Knockoutjs系列之js接收C&num;数据集合的方式

    返回目录 在controller里将数据拿到,并且存储到ViewBag对象里,最后在View上显示出来,这是传统的MVC开发方式,事实上引入Knockoutjs以后,这种方式还是适合的,Knockou ...

  6. MVVM架构~knockoutjs系列之正则表达式使规则更灵活

    返回目录 几乎每种验证架构都会有正则表达式的加盟,一般地,一种验证架构首先会提供一些标准的,常用的验证规则,它们通常是数字验证,电话验证,email验证,长度验证,范围验证,日期验证等,而如果使你的验 ...

  7. MVVM架构~knockoutjs系列之验证信息自定义输出~再续

    返回目录 对于一个项目的表单验证,方式有很多,效果也有很多,具体使用哪种完成取决于产品这边,产品让你用什么,你就要用什么,而做为开发人员,我们要做的就是"整理近可能多的架构方式",这样才可以*的应变 ...

  8. MVVM架构~Knockoutjs系列之对象与对象组合

    返回目录 在面向对象的程序设计里,对象是核心,一切皆为对象,对象与对象之间的关系可以表现为继承和组合,而在Knockoutjs或者JS里,也存在着对象的概念,今天主要说一下JS里的对象及对象的组合. ...

  9. MVVM架构~knockoutjs系列之从Knockout&period;Validation&period;js源码中学习它的用法

    返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...

随机推荐

  1. 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. 预处理(防止sql注入的一种方式)

    <!--- 预处理(预编译) ---><?php/* 防止 sql 注入的两种方式: 1. 人为提高代码的逻辑性,使其变得更严谨,滴水不漏. 比如说 增加判断条件,增加输入过滤等,但 ...

  3. BizTalk 开发系列&lpar;四十二&rpar; 为BizTalk应用程序打包不同的环境Binding

    我们在使用微软或者其他公司提供的BizTalk应用程序MSI包的时候经常会有一个目标环境的选择选项.该选项可以在不同的环境下使用不同的绑定(BizTalk应用程序配置)感觉很高级. 其实这个非常的简单 ...

  4. &lpar;copy&rpar; DBAN vs nwipe

    source: https://sourceforge.net/p/dban/discussion/208932/thread/cb591b59/ Question:Trouble in runnin ...

  5. Excel 2007 批量删除隐藏的文本框&lbrack;转&rsqb;

    该方法取自百度知道,该朋友给出函数,我详细写一下方法. 打开有文本框的excel文件. 按 Alt+F11 打开编辑器. 将下面的函数复制进去: Sub deltxbox()Dim s As Shap ...

  6. Android 4&period;4之后删除短信进行处理

    android 4.4删除短信 android 4.4之后非默认的短信应用已经没有办法删除短信了.像以前那样用如下方法是不会没法删除短信的(即使在xml中配置了短信的读写权限),同时也不会有报错或其他 ...

  7. &lt&semi;iostream&gt&semi; 和 &lt&semi;iostream&period;h&gt&semi;的区别 及 Linux下编译iostream&period;h的方法

    0.序言 其实2者主要的区别就是iostream是C++标准的输入输出流头文件,而iostream.h是非标准的头文件. 标准头文件iostream中的函数属于标准命令空间,而iostream.h中的 ...

  8. qt 自动完成LineEdit

    原地址:http://www.cppblog.com/biao/archive/2009/10/31/99873.html     ---------------------------------- ...

  9. mysql&lowbar;install&lowbar;db出错,Unable to lock &sol;usr&sol;local&sol;mysql&sol;var&sol;ibdata1&comma; error&colon; 11

    今天,在一台旧机器上编译一个新的Mysql,install时出了错: /usr/local/mysql_5615/scripts/mysql_install_db --user=mysql --bas ...

  10. mina框架tcpt通讯接收数据断包粘包处理

    用mina做基于tcp,udp有通讯有段时间了,一直对编码解码不是很熟悉,这次做项目的时候碰到了断包情况,贴一下解决过程, 我接受数据格式如下图所示: unit32为c++中数据类型,代表4个字节,由 ...