1、模板绑定(使用插件jquery.tmpl)

var ViewModel={Product:ko.observable()}

    <div data-bind="template:{name:'templatePropertys'}"><div>
<script type="text/html" id="templatePropertys">
{{each(i,item) Product().自定义属性集}}
<div class="form-group">
<label for="inputEmail3" class="col-lg-2 control-label" data-bind="text:item.Key"></label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" data-bind="value:item.Value">
</div>
</div>
{{/each}}
</script>

在写each对象集的时候请注意 ViewModel的属性一定要加'()',属性对象内的对象不需要加'()'

2、关于ko的重复绑定

ko.cleanNode(document.getElementById("divCatalog"));//清除绑定
ko.applyBindings(CatalogVM, document.getElementById("divCatalog"));//再次重新绑定

3、转化View Model数据到JSON格式

ko.toJS — 克隆你的view model对象,并且替换所有的observable 对象为当前的值,这样你可以得到一个干净的和Knockout无关的数据copy。

ko.toJSON — 将view model对象转化成JSON字符串。原理就是:先调在view model上调用ko.toJS,然后调用浏览器原生的JSON 序列化器得到结果。注:一些老浏览器版本不支持原生的JSON 序列化器(例如:IE7和以前的版本),你需要引用json2.js类库。

4、使用JSON更新View Model数据

如果你从服务器端获取数据并且更新到view model上,最简单的方式是自己实现。例如

// Load and parse the JSON
var someJSON = /* Omitted: fetch it from the server however you want */;
var parsed = JSON.parse(someJSON); // Update view model properties
viewModel.firstName(parsed.firstName);
viewModel.pets(parsed.pets);

5、.net C# 向后台异步提交json模型

var d = ko.toJS(BaseInfo);
var c = JSON.stringify(d);//将json转为字符串

6、操作observableArray

indexOf

indexOf方法返回数组中第一个等于你传入参数项的索引,例如myObservableArray.indexOf('Blah')将会返回从0开始第一个数组项等于Blah的数组索引,如果没有找到匹配记录则返回-1.

Slice

Slice函数是observableArray等价于原生的JavaScript的slice方法(它返回从开始索引到结束索引之间的所有对象集合)。调用myObservableArray.slice(...)等价于调用myObservableArray.slice(...)方法。

操作observableArray

observableArray提供了一组简单的方法来操作数组的内容并通知订阅者。

pop, push, shift, unshift, reverse, sort, splice

以上的这些方法等价于使用原生JavaScript方法对数组进行操作,最大的区别在于它们会通知订阅者数组的变化。

myObservableArray.push('Some new value')在数组末尾添加一个新项

myObservableArray.pop()移除数组最后一项并返回它

myObservableArray.unshift('Some new value')在数组头部插入新项

myObservableArray.shift()移除数组中第一项并返回它

myObservableArray.reverse()翻转整个数组的顺序

myObservableArray.sort()对数组内容进行排序

默认情况下,按照字符(如果是字符串)或数字(如果是数字)顺序排序

另外,你也可以通过传入一个排序函数来对数组进行排序。这个排序函数需要接受两个参数(代表数组两个要比较的项),如果第一项小于第二项,则返回-1;大于返回1;等于返回0。

例如:使用lastname对Person对象进行排序,你可以这样写:

  1. myObservableArray.sort(function(left, right) {
  2. return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1)
  3. });

myObservableArray.splice()删除指定索引和指定数目的数组元素对象。例如:myObservableArray.splice(1, 3)从1开始删除3个元素,并将这3个元素作为元素数组返回。 想了解observableArray 更多的函数信息,可以参考标准JavaScript数组函数的文档。

remove and removeAll

observableArray 添加了许多非常有用但JavaScript数组默认没有的函数方法。

myObservableArray.remove(someItem) 删除所有值等于someItem 的数组项,并将删除元素作为一个数组返回

myObservableArray.remove(function(item) { return item.age < 18 })删除所有元素age 属性小于18的数组项,并将删除元素作为一个数组返回

myObservableArray.removeAll(['Chad', 132, undefined]) 删除所有值等于'Chad'、132、undefined的数组项,并将删除元素作为一个数组返回

myObservableArray.removeAll()删除所有的数组项,并将删除元素作为一个数组返回

destroy and destroyAll

(注:通常只和和Ruby on Rails开发者有关)

destroy和destroyAll函数是为Ruby on Rails开发者方便使用为开发的:

myObservableArray.destroy(someItem)查找所有值等于someItem 的数组元素对象,并给它们添加_destroy 的属性,赋值为true

myObservableArray.destroy(function(someItem) { return someItem.age < 18 }) 查找所有元素age属性小于18的数组元素对象,并给它们添加_destroy 的属性,赋值为true

myObservableArray.destroyAll(['Chad', 132, undefined])查找所有值等于'Chad'、132、undefined的数组元素对象,并给它们添加_destroy 的属性,赋值为true

myObservableArray.destroyAll()给所有的元素对象添加_destroy 的属性,赋值为true

那么,_destroy是做什么用的?正如我提到的,这只是为Rails 开发者准备的。在Rails 开发过程中,如果你传入一个JSON对象,Rails 框架会自动转换成ActiveRecord对象并且保存到数据库。Rails 框架知道哪些对象以及在数据库中存在,哪些需要添加或更新, 标记_destroy为true就是告诉框架删除这条记录。

注意的是:在KO render一个foreach模板的时候,会自动隐藏带有_destroy属性并且值为true的元素。所以如果你的“delete”按钮调用destroy(someItem) 方法的话,UI界面上的相对应的元素将自动隐藏,然后等你提交这个JSON对象到Rails上的时候,这个元素项将从数据库删除(同时其它的元素项将正常的插入或者更新)。

7、关于Knockout ObservableArray  移除Item

var VM = {
       ListItem: ko.observableArray(),
   Remove: function (i) {
   ListItem.splice(index, 1);//注意不带ListItem‘()’
 }}

<i class="glyphicon glyphicon-remove"  data-bind="click:function(){ListItem(1)} "  ></i>

8、关于Knockout '模板嵌套绑定'  多参数问题

templateOptions:{id:newId,data:newData}

如果放在最后例如:template: { name: 'templateList'},templateOptions:{id:newId,data:newData}">

会出缺少'}'bug

将templateOptions放在前面问题解决

<div   data-bind="template: { templateOptions:{id:newId,data:newData},name: 'templateList'}">

<div   data-bind="template: { templateOptions:{id2:$item.id,data2:$item.data},name: 'templateList2'}"></div></div>

9、关于Knockout  ‘if’ 语法

{{if  1==1}}/*注意:if是不带()的*/   如:{{if (1==1)}} 是错误的写法

{{/if}}

10、关于Knockout  ‘each’ 语法

{{each(i,item) $item.data()}}/*注意:‘each’  前后不能带有空格*/ 如:{{   each(i,item) $item.data()   }}/  是错误的写法

{{/each}}

11、关于模板绑定

<script type="text/html" id="template">

/*注意:内容外一定要套一层*/

如:正确写法

<div>

<div data-bind="text:item.订单状态文字"></div>

</div>

如:错误写法[会提示:错误: 对象不支持“shift”属性或方法]

<div data-bind="text:item.订单状态文字"></div>

</script>

MVC MVVM Knockout 常遇问题总结的更多相关文章

  1. MVC MVVM Knockout viewmodel 提交 完整过程,包含序列化 JSON 和 字典模型绑定

    //JSON 通用操作------------------------------------------------------------------------------using Syste ...

  2. MVC & MVVM

    什么是MVC,什么是MVVM? 面向过程 --> 面向对象 --> MVC --> MV* 面向过程: 开发人员按照需求逻辑顺序开发代码逻辑,主要思维模式在于如何实现.先细节,后整体 ...

  3. MVP MVC MVVM 傻傻分不清

    最近MVC (Model-View-Controller) 和MVVM (Model-View-ViewModel) 在微软圈成为显学,ASP.NET MVC 和WPF 的Prism (MVVM Fr ...

  4. mvc/mvvm小小的总结

    mvc/mvvm 阮大神博客 mvc 分为三层,其实M层是数据模型层,它是真正的后端数据在前端js中的一个映射模型,他们的关系是:数据模型层和视图层有映射关系,model改变,view展示也会更改,当 ...

  5. JavaScript富应用MVC MVVM框架

    对框架的挑选 Ember.js.Backbone.js.Knockout.js.Spine.js.Batman.js , Angular.js 1. 轻量级的应用选择哪一个会比较好?2. 那一个比较简 ...

  6. 我的架构设计~用层关系图说说mvc,mvvm,soa,ddd

    下面是按着我所接触的架构模式,开始一个一个的说一下 第一 标准架构 三层结构

  7. iOS MVC, MVVM

    在iOS app里,如果用传统的MVC模式,Model层就是数据,View层就是Storyboard,nib文件或者构建UI的代码,Controller层就是ViewController,负责协调Mo ...

  8. 几种JavaScript富应用MVC MVVM框架

    Ember.js.Backbone.js.Knockout.js.Spine.js.Batman.js , Angular.js 前端中的MVVM设计模式让UI与数据模型可以很轻松的相互更新,这意味着 ...

  9. MVP, MVC, MVVM, 傻傻分不清楚~

    1 简介 英文原文:MVC vs. MVP vs. MVVM 三者的目的都是分离关注,使得UI更容易变换(从Winform变为Webform),使得UI更容易进行单元测试. 2 MVC/MVP 2.1 ...

随机推荐

  1. openssl rsa 私钥 PKCS8私钥 公钥

    上文配置好 openssl 运行 => cmd => cd C:\usr\local\ssl\bin => 执行 openssl

  2. HtmlPrefixScopeExtensions

    http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

  3. 解决 window server2008 r2 没有注册Ofiice组件的方法

    解决 window server2008  r2 没有注册Ofiice组件的方法   .NET下在用Microsoft.Office.Interop.Excel及word 操作Excel和Word时, ...

  4. Android API 中文 ListView

    正文 一.结构 public class RatingBar extends AbsSeekBar java.lang.Object android.view.View android.view.Vi ...

  5. android softinput 相关

    getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN | WindowManager.Layo ...

  6. java的文件流:字节流(FileInputStream、FileOutputStream)和字符流(FileReader、FileWriter)。

    java的输入输出建立在4个抽象类的基础上:InputStream.OutputStream.Reader.Writer.InputSream和OutputStream被设计成字节流类,而Reader ...

  7. DAY13 Matlab实现图像错切源代码

    Matlab实现图像错切源代码 %错切im=(imread('robot.jpg'));im1=rgb2gray(im);figure,imshow(im1);[row,col]=size(im1); ...

  8. [AFUI]App Framework Plugins

    ---------------------------------------------------------------------------------------------------- ...

  9. Flex 4 不同主题下容器子元素的管理方法

    Flex 下,容器主要分两类:Spark容器, Halo容器. Spark容器 Halo容器 说明 numElements numChildern 容器的子元素数量. addElement( ) ad ...

  10. 【PL/SQL练习】函数

    1.必须返回一个值2.只能在表达式调用 SQL> create or replace function fun1 return number is v_sum_sal emp.sal%type; ...