MVC MVVM Knockout 常遇问题总结

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对象进行排序，你可以这样写：

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

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>