WinJS.Binding.List与kendo.data.ObservableArray
avalon0.8一个最大目标是实现对数组的深层监控,可是面临的困难重重,至今还没有什么起色。于是看一下其他两个MVVM框架的做法(knockout, emberjs, angular都不能监听家庭数组元素的属性改动)
WinJS.Binding.List的详细文档可见这里
我写了一些测试示例,发现它是生成一个新对象来处理,而且不是数组实例,也不是类数组对象,用起点有点别扭。
var object = new WinJS.Binding.List([1, 2, 3, 5, {a: 4}]);
console.log(object)
console.log(object.getItem(0))
console.log(object.getAt(0)) object.addEventListener("iteminserted", function() {
console.log(arguments)
})
object.addEventListener("itemchanged", function() {
console.log(arguments)
})
object.addEventListener("itemmutated", function() {
console.log(arguments)
})
object.push(7, 8, 9) object.setAt(0, 10)
object.setAt(4, {a: 7})
console.log(object.getItem(4))
object.getItem(4).data.a = "7777777"
object.notifyMutated(4)
kendo ui的监控数组可见这里这里
var array = new kendo.data.ObservableArray([1, 2, 3]); array.bind("change", function(e) {
console.log(e.action, e.index, e.items);
}); array.push(4, 5); // outputs "add", 3, [4, 5] array.pop(); // outputs "remove", 4, [5] var people = new kendo.data.ObservableArray([{ name: "John Doe" }]); people.bind("change", function(e) {
console.log(e.action, e.field, e.items[0].get("name"));
}); people[0].set("name", "Jane Doe"); // outputs "itemchange", "name", "Jane Doe"
从它们的接口设计来看,它们不像avalon原打算的那样,通过监控数组所在的VM来监控,而是监控数组本来就应该自己管好自己。
avalon.define("xxx", function(vm){
vm.array = [1,2,3,4]
vm.$watch("array.length", callback)
})
//打算从上面的接口换成下面这种
var model = avalon.define("xxx", function(vm){
vm.array = [1,2,3,4]
})
model.$watch("length", callback)
model.$watch("remove", callback)
model.$watch("add", callback)
model.$watch("change", callback)
WinJS.Binding.List与kendo.data.ObservableArray的更多相关文章
- Optimizing Performance: Data Binding(zz)
Optimizing Performance: Data Binding .NET Framework 4.5 Other Versions Windows Presentation Founda ...
- Data Binding in WPF
http://msdn.microsoft.com/en-us/magazine/cc163299.aspx#S1 Data Binding in WPF John Papa Code downl ...
- Data Binding(数据绑定)用户指南
1)介绍 这篇文章介绍了如何使用Data Binding库来写声明的layouts文件,并且用最少的代码来绑定你的app逻辑和layouts文件. Data Binding库不仅灵活而且广泛兼容- 它 ...
- Android开发利器之Data Binding Compiler V2 —— 搭建Android MVVM完全体的基础
原创声明: 该文章为原创文章,未经博主同意严禁转载. 前言: Android常用的架构有:MVC.MVP.MVVM,而MVVM是唯一一个官方提供支持组件的架构,我们可以通过Android lifecy ...
- Data Binding MVVM 数据绑定 总结
示例代码:https://github.com/baiqiantao/DataBindingTest 参考:精通Android Data Binding Android Data Binding ...
- 精通 Android Data Binding
转自:https://github.com/LyndonChin/MasteringAndroidDataBinding 官方虽然已经给出了教程 - Data Binding Guide (中文版 - ...
- Kendo UI 初始化 Data 属性
初始化 Data 属性 前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个 HTML 元素转换成一个 Kendo UI 控制项: $(“#datepicker”).ke ...
- Data Binding on Android
Data Binbing框架是在2015年Google I/O大会上最早提出来的,一直在Android开发者中热议,但是很少有真正在项目中用到.本文简单介绍Data Binding框架的简单用法以及其 ...
- Windows 8.1 应用再出发 (WinJS) - 几种新增控件(2)
上篇我们介绍了Windows 8.1 和 WinJS 中新增控件中的 AppBarCommand.BackButton.Hub.ItemContainer,本篇我们接着来介绍 NavBar.Repea ...
随机推荐
- android.content.Context 含义及使用
Context字面意思上下文,位于framework package的android.content.Context中,其实该类为LONG型,类似Win32中的Handle句柄,很多方法需要通过Con ...
- Linux下检查是否安装过某软件包
1.rpm包安装的,可以用 rpm -qa 看到,如果要查找某软件包是否安装,用 rpm -qa | grep "软件或者包的名字" 2.以deb包安装的,可以用 dpkg -l ...
- [HDOJ3974]Assign the task(建树胡搞)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3974 出现在窝bin的线段树专题里…第一时间想的是记录入度找出根节点,然后标记深度转换到线段树中.但是 ...
- Careerdesign@foxmail.com
Careerdesign@foxmail.com 相关文章 32岁了,我还有没有机会转行做程序员吗? 如何有效渡过充满迷茫的大学生活 毕业了,我是先择业,还是先就业? 程序员创业,不要把风险带给家人! ...
- ElasticSearch Remote Code Execution (CVE-2014-3120)
Elasticsearch is a powerful open source search and analytics engine. The vulnerability allows attack ...
- Jqgrid入门-别具特色的Pager Bar (四)
Pager Bar位于表格最下边.默认情况下,分为三部分.如图: 第一部分:导航按钮栏(Navigator) 第二部分:页码栏(Pager) 第三部分:记录信息栏(Record) 要实 ...
- ASP.NET中POST提交数据并跳转页面
需求:先Post提交数据,然后跳转到目标页面 找了好久才发现这个神奇的类HttpHelper.原理很简单,利用html的from表单拼接,然后执行 使用方法: NameValueCollection ...
- 修改placeholder属性
input::-webkit-input-placeholder{ font-size:12px;}input:-ms-input-placeholder{ font-size:12px;}input ...
- 使用AngularJS 进行Hybrid App 开发已经有一年多时间了,这里做一个总结
一.AngularJS 初始化加载流程 1.浏览器载入HTML,然后把它解析成DOM.2.浏览器载入angular.js脚本.3.AngularJS等到DOMContentLoaded事件触发.4.A ...
- 省常中模拟 Test4
prime 数论 题意:分别求 1*n.2*n.3*n.... n*n 关于模 p 的逆元.p 是质数,n < p. 初步解法:暴力枚举.因为 a 关于模 p 的逆元 b 满足 ab mod p ...