级a做爰片免费视网站,设计logo免费生成器,西安谁家做网站,手工灯笼最近马上要开始一个新项目的研发#xff0c;作为第一次mvvm应用的尝试,我决定使用knockoutjs框架。作为学习的开始就从官网的Document翻译开始吧#xff0c;这样会增加印象并加入自己的思考#xff0c;说是翻译也并不是纯粹的翻译#xff0c;会加入自己对知识点的思考以及自…        最近马上要开始一个新项目的研发作为第一次mvvm应用的尝试,我决定使用knockoutjs框架。作为学习的开始就从官网的Document翻译开始吧这样会增加印象并加入自己的思考说是翻译也并不是纯粹的翻译会加入自己对知识点的思考以及自己的尝试在系列最后也希望用一个应用案例作为结尾。希望自己能坚持下来并有所收获理解不对的地方大家也指出来避免我”误入歧途“。也并不会翻译所有的内容我会根据自己的经验选择最能反映它使用和精髓的部分。当前版本为3.4       好了闲言少叙正篇开始。 　　 　　华丽的分割线       knocket主要围绕由以下三个核心特征组成  Observables观察器与dependency tracking依赖追踪 Declarative bindings声明式绑定 Templating模板            MVVM and View Models       Model-View-View Model (MVVM) 是一种创建用户界面或用户接口的设计模式。你可以通过将UI拆分成下面三个部分从而将复杂的UI简洁化清晰化 Model数据模型: 应用程序存储数据。模型包括了你应用程序域中与业务相关的数据以及这些数据对应的操作(例如 一个银行账户模型具有转账的功能)并且它跟UI是相互独立 的。 当时用KO的时候,通常这类模型是通过ajax从服务器端进行获取的。ViewModel视图模型: 服务于数据模型为数据模型在UI上的展现及UI上的操作进行包装服务。 例如, 如果你要在UI上做一个列表展现, 你的视图模型将会是包含一个数据集合的对象, 并提供一些添加和删除数据的相关方法。需要注意的是视图模型并不是UI本身它并不包括任何UI元素比如按钮啊标签啊样式之类。它也不是持久化的数据对象它只是为数据模型临时保存一些用户正在处理的数据。当我们在使用KO的时候它无非就是一些纯粹的javascript对象而已。A view视图: 一个可视可交互的真正的UI展现他展现着视图模型的当前状态。它所展现的信息来自于视图模型并且向视图模型发送命令执行动作 (例如 当用户点击按钮的时候视图向视图模型发送命令视图模型进行真正的操作),并且当视图模型属性发生变化的时候视图会自动进行展现的更新。当时用KO的时候你的视图中的Html元素内容可以通过声明式绑定与视图模型进行连接从而决定UI如何展现。另外你也可以通过使用模板的方式来使用视图模型中的数据生成UI中的Html内容。模板后面会提到      好了让我们来举个很小的例子来看看上面说的视图与视图模型在KO中是如何协作的。创建一个视图模型对象非常容易随意声明一个javascript对象我们就可以将它作为视图模型对象。例如 //创建一个视图模型对象 var myViewModel {personName: Bob,personAge: 123}; ko.applyBindings(myViewModel);//ko是knockoutjs中的全局对象这句话的意思是将数据模型对象与UI中所有有data-bind的属性进行声明绑定的元素进行连接 然后我们就可以创建一个非常简单的视图来展现上面的视图对象。还记得吗他们使用声明式绑定来进行连接。下面的视图用来展现视图模型对象中的personName数据。 The name is span data-bindtext: personName/span   好了现在如果运行页面的话将会显示如下运行结果 通过上面的例子我们可以看到在UI上赋值我们并没有像jquery一样通过js来控制而是使用声明绑定的方式在UI元素和js数据对象上建立联系自动展现。在上面的代码标签中data-bind 并不是Html中的原生标记,它在Html5中得到浏览器的支持是KO框架用来进行声明式绑定的工具所以在KO中进行声明式绑定都通过data-bind属性进行。有了视图模型有了相应视图最后要进行两者的连接了所以下面这行代码必不可少 ko.applyBindings(myViewModel); //将myViewModel对象与UI中所有进行了声明式绑定的元素进行连接注意是所有。 完整测试代码 The name is span data-bindtext: personName/span section scripts {script src~/Scripts/knockout-3.4.0.js/scriptscript typetext/javascript$(function () {var myViewModel {personName: Bob,personAge: 123};ko.applyBindings(myViewModel);});/script }         关于ko.appyBindings(myViewModel)中参数的作用说明一下第一个参数说明在整个UI中你希望使用哪个视图模型对象与视图中的声明绑定进行连接。你也可以传递第二个参数来决定这个视图模型与UI中的哪个特定的声明式绑定(data-bind)进行连接而不是与所有的进行连接。举个例子, ko.applyBindings(myViewModel, document.getElementById(someElementId))。这就限制了这个视图模型对象只能与ID为someElementId 的Html元素对象以及它的后代元素对象进行连接,这样的话当你想要定义多个视图模型对象并且与页面中不同的元素进行绑定的时候就会特别有用。到目前为止真的是相当简单吧。      Observables      好了你已经看到了如何创建一个基本的视图模型以及如何通过绑定进行它的属性数据的展现。但是使用KO一个核心的好处是当视图模型内容改变的时候它还会自动更新你的UI,反之亦然。这有时会大大简化你的代码我们稍后展示这个效果。那么KO如何知道你的视图模型什么时候发生了改变进而更新你的UI呢答案是:你需要将你的数图模型中的属性声明为observable类型对象。 observables类型对象非常特殊当视图模型发生改变的时候他们可以向订阅者发出通知,并自动建立与订阅者的关系订阅者也就是具有声明式绑定的元素。举个例子, 重写一下上面的代码如下      $(function () {var myViewModel {personName: ko.observable(Bob),personAge: ko.observable(123)};ko.applyBindings(myViewModel);});      现在你完全不需要视图 data-bind 声明部分保持不变. 与之前代码不同的是现在ko可以自动监测变化了, 一旦视图模型有数据发生变化它就会自动更新视图。      Observables属性的读取与写入      要读取observable的当前值只需要像调用方法一样以无参数的方式调用它。以上面的代码为例, myViewModel.personName() 将会返回 Bob,而myViewModel.personAge() 将返回123。      要向observable属性中写入一个值的话也跟上面一样进行调用只不过传入一个你想要写入的新值就可以了。举个例子调用myViewModel.personName(Mary) 将会为personName赋一个新的名字。另外KO还提供了一个非常方便的代码链写法。 像这样myViewModel.personName(Mary).personAge(50) 会修改personName为 Mary personAge修改为 50。      observables的核心作用就是观察 也就是说, 被声明为observable的属性将来是会被双向通知的它通知其它UI元素它已经被修改了并且观察相关UI元素内容并将变化值更新到ViewModel对象上。KO框架中的很多内置绑定就是用来干这事儿的。所以当你在UI元素上例如span标签写上data-bindtext: personName的时候 text 绑定类型将把这个span元素进行注册并做好被通知的准备只要视图对象上的personName发生了该表span就会被通知修改内部的文本内容(假设personName是一个observable值另外除了text绑定还有许多其它类型绑定我们后面提到)。      当你通过调用myViewModel.personName(Mary)来修改personName的值的时候, text绑定将会自动更新相关DOM元素的text内容 。    observables的显示订阅处理       通常你无需干预订阅的过程所以初学者可以暂时跳过这一小节。     当observable类型数据发生改变后如果你希望在这个过程中做一些处理你可以调用observable属性上的subscribe方法来将自己的处理代码注册进来。举个例子: myViewModel.personName.subscribe(function(newValue) {alert(The persons new name is newValue); });     上面这段代码执行后如果修改了personName的值后那么将会弹出一个警告框并且通过newValue参数可以获取当前正在更新的值。这个过程叫订阅注册。     subscribe方法接受三个传入参数: callback 是一个function当通知到来时会自动执行, target (可选) 定义了在callback方法中 this代表了哪个对象默认的话this就是当前视图模型对象, event(可选; 默认值是change) 事件名称是指当什么类型的事件发生的时候会有通知到来默认情况下就是当值发生改变的时候。其它类型我们后面谈到。      当然了一旦你注册了一个自己的订阅你也可以根据需要在未来的某个时候取消这个订阅你需要先定义一个变量来接收subscribe当前的返回值然后调用dispose方法。代码如下 var subscription myViewModel.personName.subscribe(function (newValue) { /* do stuff */ }); // ...then later... subscription.dispose();      如果你希望在observable类型值在发生改变但被赋值之前做一些处理的话你也可以在beforeChange 事件上注册自己的处理代码如下 myViewModel.personName.subscribe(function(oldValue) {alert(The persons previous name is oldValue); }, null, beforeChange);     注意: Knockout 是否触发上面的订阅还有一个默认条件就是新的值必须与老的值不相同如果赋值时是相同值的话那么将不会触发这两个订阅。如果需要更改这种默认动作可以使用订阅器上的extend方法来修改。代码如下 myViewModel.personName.extend({ notify: always });     最后如果你的observable属性在更新时的动作比较耗时或者会更新的很频繁你可以通过限制通知的时间间隔毕竟订阅通知会有性能影响。做法如下 myViewModel.personName.extend({ rateLimit: 50 });     这样的话就算是频繁更新属性值每次通知的事件间隔也会控制在50毫秒。测试代码如下 button typebutton idbtnStart点击测试/button span idclickcontent/span section scripts {script src~/Scripts/knockout-3.4.0.js/scriptscript typetext/javascript$(function () {var myViewModel {//personName: ko.observable(ZhouBo)personName: ko.observable(ZhouBo)};myViewModel.personName.extend({ notify: always });myViewModel.personName.extend({ rateLimit: 5000 });ko.applyBindings(myViewModel);var index 0;$(#btnStart).click(function () {$(#clickcontent).text(index);myViewModel.personName(index);});}); 说明如果我快速点击按钮 btnStart,则5秒钟之后第一个span的内容才会发生变化也就是5庙后才发送了一次通知。   转载于:https://www.cnblogs.com/MichaelBang/p/5589421.html