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的更多相关文章

  1. Optimizing Performance: Data Binding(zz)

    Optimizing Performance: Data Binding .NET Framework 4.5 Other Versions   Windows Presentation Founda ...

  2. Data Binding in WPF

    http://msdn.microsoft.com/en-us/magazine/cc163299.aspx#S1   Data Binding in WPF John Papa Code downl ...

  3. Data Binding(数据绑定)用户指南

    1)介绍 这篇文章介绍了如何使用Data Binding库来写声明的layouts文件,并且用最少的代码来绑定你的app逻辑和layouts文件. Data Binding库不仅灵活而且广泛兼容- 它 ...

  4. Android开发利器之Data Binding Compiler V2 —— 搭建Android MVVM完全体的基础

    原创声明: 该文章为原创文章,未经博主同意严禁转载. 前言: Android常用的架构有:MVC.MVP.MVVM,而MVVM是唯一一个官方提供支持组件的架构,我们可以通过Android lifecy ...

  5. Data Binding MVVM 数据绑定 总结

    示例代码:https://github.com/baiqiantao/DataBindingTest 参考:精通Android Data Binding    Android Data Binding ...

  6. 精通 Android Data Binding

    转自:https://github.com/LyndonChin/MasteringAndroidDataBinding 官方虽然已经给出了教程 - Data Binding Guide (中文版 - ...

  7. Kendo UI 初始化 Data 属性

    初始化 Data 属性 前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个  HTML 元素转换成一个 Kendo UI 控制项: $(“#datepicker”).ke ...

  8. Data Binding on Android

    Data Binbing框架是在2015年Google I/O大会上最早提出来的,一直在Android开发者中热议,但是很少有真正在项目中用到.本文简单介绍Data Binding框架的简单用法以及其 ...

  9. Windows 8.1 应用再出发 (WinJS) - 几种新增控件(2)

    上篇我们介绍了Windows 8.1 和 WinJS 中新增控件中的 AppBarCommand.BackButton.Hub.ItemContainer,本篇我们接着来介绍 NavBar.Repea ...

随机推荐

  1. 查看局域网内某个ip的mac地址

      首先需要ping一下对方的ip,确保本地的arp表中缓存对方的ip和mac的关系 C:\Windows\System32>ping 192.168.1.231 正在 Ping 192.168 ...

  2. 新浪实时股票数据接口http://hq.sinajs.cn/list=code

    股票数据的获取目前有如下两种方法可以获取:1. http/javascript接口取数据2. web-service接口 1.http/javascript接口取数据1.1Sina股票数据接口以大秦铁 ...

  3. Java 比较两张图片的相似度

    import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.ImageIO; /** * 比较两张图片 ...

  4. Codeforces Round #242 (Div. 2) C. Magic Formulas (位异或性质 找规律)

    题目 比赛的时候找出规律了,但是找的有点慢了,写代码的时候出了问题,也没交对,还掉分了.... 还是先总结一下位移或的性质吧: 1.  交换律 a ^ b = b ^ a 2. 结合律 (a^b) ^ ...

  5. Hibernate学习笔记之EHCache的配置

    Hibernate默认二级缓存是不启动的,启动二级缓存(以EHCache为例)需要以下步骤: 1.添加相关的包: Ehcache.jar和commons-logging.jar,如果hibernate ...

  6. python模拟http请求2

    发现了一个非常好用的第三方module:requests,模拟接口非常简单. 详细了解请移步:http://docs.python-requests.org/en/latest/ 非常不错 #!cod ...

  7. Ubuntu解决Sublime Text 2安装GBK Encoding Support插件仍然乱码

    Ubuntu 12.04 32位下,为Sublime Text 2安装Package Control: 1. 用Ctrl+~打开控制台,输入 import urllib2,os; pf='Packag ...

  8. 浏览器检测是否安装flash插件,若没有安装,则弹出安装提示

    说白了其实就是在html中前途flash的使用代码 <!--    html嵌入flash,检测浏览器是否安装flash插件,并提示安装.-->    <object type=&q ...

  9. win下Velocity安装和试用

    1.eclipse等就不说了 2.velocity的eclipse插件: http://www.oschina.net/p/veloeclipse(介绍) 方法1(现在基本上非常慢)http://pr ...

  10. ruby函数回调的实现方法

    以前一直困惑ruby不像python,c可以将函数随意传递,然后在需要的时候才去执行.其实本质原因是ruby的函数不是对象. 通过查阅资料发现可以使用如下方法: def func(a, b) puts ...