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>
MVC MVVM Knockout 常遇问题总结的更多相关文章
- MVC MVVM Knockout viewmodel 提交 完整过程,包含序列化 JSON 和 字典模型绑定
//JSON 通用操作------------------------------------------------------------------------------using Syste ...
- MVC & MVVM
什么是MVC,什么是MVVM? 面向过程 --> 面向对象 --> MVC --> MV* 面向过程: 开发人员按照需求逻辑顺序开发代码逻辑,主要思维模式在于如何实现.先细节,后整体 ...
- MVP MVC MVVM 傻傻分不清
最近MVC (Model-View-Controller) 和MVVM (Model-View-ViewModel) 在微软圈成为显学,ASP.NET MVC 和WPF 的Prism (MVVM Fr ...
- mvc/mvvm小小的总结
mvc/mvvm 阮大神博客 mvc 分为三层,其实M层是数据模型层,它是真正的后端数据在前端js中的一个映射模型,他们的关系是:数据模型层和视图层有映射关系,model改变,view展示也会更改,当 ...
- JavaScript富应用MVC MVVM框架
对框架的挑选 Ember.js.Backbone.js.Knockout.js.Spine.js.Batman.js , Angular.js 1. 轻量级的应用选择哪一个会比较好?2. 那一个比较简 ...
- 我的架构设计~用层关系图说说mvc,mvvm,soa,ddd
下面是按着我所接触的架构模式,开始一个一个的说一下 第一 标准架构 三层结构
- iOS MVC, MVVM
在iOS app里,如果用传统的MVC模式,Model层就是数据,View层就是Storyboard,nib文件或者构建UI的代码,Controller层就是ViewController,负责协调Mo ...
- 几种JavaScript富应用MVC MVVM框架
Ember.js.Backbone.js.Knockout.js.Spine.js.Batman.js , Angular.js 前端中的MVVM设计模式让UI与数据模型可以很轻松的相互更新,这意味着 ...
- MVP, MVC, MVVM, 傻傻分不清楚~
1 简介 英文原文:MVC vs. MVP vs. MVVM 三者的目的都是分离关注,使得UI更容易变换(从Winform变为Webform),使得UI更容易进行单元测试. 2 MVC/MVP 2.1 ...
随机推荐
- Android中MenuInflater实例
我们知道,LayoutInflater是用来实例化整个布局文件,而MenuInflater是用来实例化Menu目录下的Menu布局文件的. 传统意义上的菜单定义需要Override Activity的 ...
- 在探索中感悟,在摸索中前进--ET之快递法
飞测说:最近很多朋友问如果没有需求文档,我该怎么测试?我自然想起了探索测试,今天来说说自己在探索测试路上的一点点感悟-------快递测试法,让我们在探索中感悟,在摸索中前进-- 快递测试法,是从ET ...
- nagios plugin 开发
https://nagios-plugins.org/doc/guidelines.html#DEVREQUIREMENTS https://blog.centreon.com/good-practi ...
- 【Python】django权限管理
参考:http://www.cnblogs.com/esperyong/ 参考:https://docs.djangoproject.com/en/1.8/topics/auth/default/#t ...
- 【MySQL】MySQL索引背后的之使用策略及优化【转】
转自:http://database.ctocio.com.cn/353/11664853.shtml 另外很不错的对于索引及索引优化的文章: http://www.cnblogs.com/magia ...
- Gestures_Article_4_0
Technical Article Windows Phone 7™ Gestures Compared Lab version: 1.0.0 Last updated: August 25, 201 ...
- extern c
extern "C"的主要作用就是为了能够正确实现C++代码调用其他C语言代码.加上extern "C"后,会指示编译器这部分代码按C语言的进行编译,而不是C+ ...
- easyui+ashx 动态初始化datagrid(动态列头)
效果图: 1:简单初始化 JSON格式数据如下(后台自己构建,后台代码略): {"total":6,"columns":[{"field": ...
- 三、第一个Struts2应用案例(编码步骤)
第一个Struts2应用案例(编码步骤) 编写2个jsp hello.jsp <body> <a href="${pageContext.request.conte ...
- Ajax实现步骤和原理
1.获取ajax异步对象 IE4~IE12 : 使用new ActiveXObject("microsoft.xmlhttp"); 非IE : 使用new XMLH ...