码迷,mamicode.com
首页 > Web开发 > 详细

ko.js学习一

时间:2018-02-03 16:09:15      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:UI   写入   对象   多个   信息   文档   push   name   hub   

一、KO是一个MVVM框架

  • 声明式绑定 (Declarative Bindings)使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。
  • UI界面自动刷新 (Automatic UI Refresh)当您的模型状态(model state)改变时,您的UI界面将自动更新。
  • 依赖跟踪 (Dependency Tracking)为转变和联合数据,在你的模型数据之间隐式建立关系。
  • 模板 (Templating)为您的模型数据快速编写复杂的可嵌套的UI。

下载地址:https://github.com/SteveSanderson/knockout/downloads

二、MVVM

MVVM and View Models

Model-View-View Model (MVVM) 是一种创建用户界面的设计模式。 描述的是如何将复杂的UI用户界面分成3个部分:

  •  model: 你程序里存储的数据。这个数据包括对象和业务操作(例如:银子账户可以完成转账功能), 并且独立于任何UI。使用KO的时候,通常说是向服务器调用Ajax读写这个存储的模型数据。
  •  view model: 在UI上,纯code描述的数据以及操作。例如,如果你实现列表编辑,你的view model应该是一个包含列表项items的对象和暴露的add/remove列表项(item)的操作方法。

    注意这不是UI本身:它不包含任何按钮的概念或者显示风格。它也不是持续数据模型 – 包含用户正在使用的未保存数据。使用KO的时候,你的view models是不包含任何HTML知识的纯JavaScript 对象。保持view model抽象可以保持简单,以便你能管理更复杂的行为。

  •  view: 一个可见的,交互式的,表示view model状态的UI。 从view model显示数据,发送命令到view model(例如:当用户click按钮的时候) ,任何view model状态改变的时候更新。

使用KO的时候,你的view就是你带有绑定信息的HTML文档,这些声明式的绑定管理到你的view model上。或者你可以使用模板从你的view model获取数据生成HTML。

三、1.监控属性的读和写

  • 读取监控属性(observable)的值,只需要直接调用监控属性(observable)(不需要参数),例如myViewModel.personName() 将返回‘Bob‘, myViewModel.personAge() 将返回 123。
  • 写一个新值到监控属性(observable)上,调用这个observable属性并当新值作为参数。例如:调用 myViewModel.personName(‘Mary‘) 将更新name值为‘Mary‘。
  • 给一个model对象的多个属性写入新值,你可以使用链式语法。例如: myViewModel.personName(‘Mary‘).personAge(50) 将会将name更新为 ‘Mary‘ 并且 将age更新为 50.

2.使用依赖监控属性(Dependent Observables)

The name is <span data-bind="text: fullName"></span>
<script>
var viewModel = {
firstName: ko.observable(‘Bob‘),
lastName: ko.observable(‘Smith‘)
};
//监控属性
viewModel.fullName = ko.dependentObservable(function () {
return this.firstName() + "ko的监控属性 " + this.lastName();
}, viewModel);
ko.applyBindings(viewModel);
</script>

 例子、验证用户输入代码

<p>Enter a numeric value: <input data-bind="value: attemptedValue"/></p>
<div data-bind="visible: !lastInputWasValid()">That‘s not a number!</div>
<script>
var viewModel = {
acceptedNumericValue: ko.observable(123),
lastInputWasValid: ko.observable(true)
};

viewModel.attemptedValue = ko.dependentObservable({
read: viewModel.acceptedNumericValue,
write: function (value) {
if (isNaN(value))
this.lastInputWasValid(false);
else {
this.lastInputWasValid(true);
this.acceptedNumericValue(value); // Write to underlying storage
}
},
owner: viewModel
});
ko.applyBindings(viewModel);

4.使用observable数组

var myObservableArray = ko.observableArray();    // Initially an empty array
myObservableArray.push(‘Some value‘);

小结:ko绑定数据时,把数据都先写入在刚开始js中声明的viewmodel中,如果需要修改数据,可以通过链式调用。

ko.js学习一

标签:UI   写入   对象   多个   信息   文档   push   name   hub   

原文地址:https://www.cnblogs.com/0828-li/p/8408771.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!