数据绑定




    
    ko
    
        


    The name is  
        //data-bind属性并不是HTML固有对象,但使用它是完全正确的
        //(这是完全遵守HTML5,尽管有验证器指出这是一个无法验证的属性,但在HTML4当中使用是不会造成任何问题的)。
        //但浏览器并不知道它是什么意思,所以你需要激活Knockout来使其生效
       


注意:js需要写在html代码下

介绍下ko.applyBindings操作时使用的是什么样的参数:

  • 第一个参数是你想激活KO时用于声明式绑定的View Model对象;

  • 第二个参数(可选),你可以使用第二个参数来设置要使用data-bind属性的HTML元素或容器。

  • 例如:
    ko.applyBindings(myViewModel, document.getElementById('someElementId'))

它限制了只有ID为someElementId的元素才能激活使用KO功能,当你在一个页面中声明了多个View Model来绑定不同的界面区域时,这样限制是很有好处的。

监控属性

你已经看到如何创建一个基本的数据模型以及如何利用绑定来显示它的属性。但是KO最重要的一个属性就是当View Model发生变化时能够自动的更新UI界面。KO是如何能够知道你的View Model已经发生改变了呢?

答案是:你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript 对象,能够通知用户它的改变以及自动检测依赖关系




    ko2
    


    
    
    


监控属性上,调用observable方法

  • 查看
  • myViewModel.personName() 返回Bob
  • 修改
  • myViewModel.personName('zhuoxiaosheng').personAge(20)返回zhuoxiaosheng 20

监控属性

  • 监控属性最重要的一点就是可以随时监控,也就是说,其他代码可以告诉它哪些是需要通知发生变化的。这就是为什么KO会有如此多的内置绑定语法。所以,当你在页面中编写data-bind="text: personName",text 会绑定注册到自身,当personName发生变化时,它能够立即得到通知。

  • 当你通过调用 myViewModel.personName('Mary') 将名称的值改变成为'Mary'时,text绑定会自动更新新值到其对应的DOM对象元素上,这就是为什么改变数据模型能够自动刷新View页面。

你可能感兴趣的:(数据绑定)