zoukankan      html  css  js  c++  java
  • KnockoutJS(1)-数据模型

    前言

    说到数据模型(ViewModel),就不得不提到MVVM模式,接触过WPF和Silverlight的人应该对这个模式比较熟悉。

    不熟悉也没多大关系,因为KnockoutJS的使用相对简单。

    MVVMView Models

    Model-View-View Model (MVVM)是一种创建用户界面的设计模式。

    通过它只要将UI界面分成以下3个部分,就可以使复杂的界面变得简单:

    1、Model,用于存储你应用程序数据,这些数据表示你业务领域的对象和数据操作(例如:银行可以进行资金转账),并且独立于任何界面。

    当使用KO的时候,通常是使用Ajax向服务器请求数据来读写这个数据模型。

    2、View Model,纯粹用于描述数据内容和页面操作的数据模型。例如,如果你想实现一个列表编辑器,你的ViewModel(数据模型)就是项目清单对象和你所暴露出来的添加和删除列表项的方法。

    注意:这不是UI本身,它不具有任何按钮和显示样式的概念。这不是持久化的数据模型—它仅是用户当前使用的未保存的数据。

    当使用KO时,你的View Model(数据模型)是纯粹的不包含HTML知识的JavaScript对象,保持View Model(数据模型)抽象在使用时可以保持简单,因此你可以更简单的操作管理更复杂的行为。

    3、View,代表View Model状态的一个可见、互动的UI界面。

    它主要用于显示View Model的数据信息、发送用户命令(例如,当用户点击按钮)以及在View Model发生变化时保持自动更新。

    使用KO时,你的View层主要就是简单的将HTML文档声明式的绑定到View Model,将它们关联起来。

    另外,你也可以利用模版从View Model获取数据动态生成HTML。

    一般使用步骤

     1. 使用KO创建一个View Model,仅仅只需要声明一个JavaScript对象,例如:

    var myViewModel = {
        personName: 'Bob',
        personAge: 123
    };

     2. 创建一个简单的视图声明式绑定到这个View Model上,例如,下面的代码显示personName的值:

    The name is <span data-bind="text: personName"></span>

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

    激活Knockout,只需要将下面的代码加到<script>标签中就可以了:

    ko.applyBindings(myViewModel);

    你可以将这个代码放到文档底部,或者放在顶部包含在DOM处理完成诸如JQuery的$函数方法中。

     

    以上操作完成后,你的View(页面)显示的内容等同于编写以下HTML代码:

    The name is <span>Bob</span>

    ko.applyBindings使用参数

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

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

     

    ko.applyBindings(myViewModel, document.getElementById('someElementId'))

      

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

  • 相关阅读:
    hibernate-取消关联外键引用数据丢失抛异常的设置@NotFound
    css-画三角箭头
    tomcat提示警告: An attempt was made to authenticate the locked user"tomcat"
    liunx下tomcat启动 Cannot find ./catalina.sh
    java:提示Could not initialize class sun.awt.X11GraphicsEnvironment
    MySQL定时器开启、调用实现代码
    mysql-存储过程案例-存储过程中创建表和修改表数据
    PowerDesigner导出SQL时自动生成注释
    mysql-利润set变量模拟分组查询每组中的第N条数据
    HTTP 405 错误 – 方法不被允许 (Method not allowed)
  • 原文地址:https://www.cnblogs.com/birdwawe/p/4064373.html
Copyright © 2011-2022 走看看