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

解决 ko mapping 数组无法添加新对象的问题

时间:2015-03-20 14:13:12      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

这两天页面模板化的进程有些放缓,使用 ko mapping 插件的情形多了起来。
组员经常问到的问题即是往 ko mapping 数组添加新对象时,报找不到方法的错误;
而使用 ko.observableArray 创建的数组则可以随意添加或删除对象,这简直奇葩问题。
好吧,不管怎样,总要解决问题的。

// 数组定义
var ViewModelArray = ko.mapping.fromJS([]);
<!--绑定文本-->
<ul data-bind="foreach:$data">
    <li data-bind="text:Name().substr(0,5), attr:{‘id‘:Id}"></li>
</ul>

以上定义完成之后,即可以执行页面加载和绑定了。

$(function () {
    ko.applyBindings(ViewModelArray, ul);
});

完成了 ul 的创建之后,某个事件触发了添加动作,需要根据数据创建新的 li 对象添加到 ul 中,例如:

function Add(){
    var data = { Id: $(‘#txtId‘).val(), Name: $(‘#txtName‘).val() };
    ViewModelArray.push(data); // 这里可能出现“找不到方法”的错误。
}

进过一番调试发现,由于需要对 Name 属性进行特殊处理,绑定文本中使用 Name() 读取了 Name 的值,而添加方法中的 data 是普通 JS 对象,并不具备 ko 对象的属性方法,因此出现了找不到方法的错误。
解决方法:

1、在后台处理好 Name 属性,前端绑定文本尽量不使用属性方法。

2、将 Add 方法中的 data 处理为 ko 对象再添加。

function Add(){
    var data = { Id: $(‘#txtId‘).val(), Name: $(‘#txtName‘).val() };
    ViewModelArray.push(ko.mapping.formJS(data));
}

建议采用第二种方式。

 

转载请注明来自飞扬的尘埃的博客。

解决 ko mapping 数组无法添加新对象的问题

标签:

原文地址:http://www.cnblogs.com/i0air/p/4353345.html

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