将某些observableArray对象属性转换为可观察对象

时间:2013-07-29 13:18:00

标签: javascript knockout.js knockout-mapping-plugin

假设我有这个相同类型对象的数组:

var people = [
    { status: 0, name: "name1"},
    { status: 1, name: "name2"}
];

我希望它不仅是observableArray,而且我还想要观察每个对象的状态属性。

想象一下,可能会添加或删除对象本身。任何这些对象的name属性都不会改变,因此我不需要观察名称,但每个对象的状态可能会发生变化,因此让它可观察是很酷的。

是否可以使用一些很酷的黑客语法将其与knockout实用程序一起映射,或者我是否必须遍历每个对象并将其status属性映射到observable,或者是否可以观察整个数组及其对象属性?

3 个答案:

答案 0 :(得分:5)

您可以使用ko.mapping.fromJS

var vm = ko.mapping.fromJS(people,{
    create: function(options){    
        return {
            status : ko.observable(options.data.status), // observable
            name: options.data.name, // non observable
        }
    }
});

现在,vm是一个observableArray,它包含状态是可观察的对象,而name是常规属性。

See fiddle

@Patryk:

如果您有许多属性并且只想将一个属性转换为可观察属性,则可以这样做。

var o = ko.mapping.fromJS(people,{create: function(options){
    // clone item
    var item = ko.utils.extend(options.data, {});
    // replace status property by an observable 
    item.status = ko.observable(options.data.status);
    return item;
}});

See updated fiddle

您还可以将observe与映射参数

一起使用
var mapping = {
    create: function (options) {
        return ko.mapping.fromJS(options.data, {'observe': ["status"]});
    }
};
var o = ko.mapping.fromJS(people, mapping);

See fiddle

我希望它有所帮助。

答案 1 :(得分:1)

我建议使用copy

所以你可以提供你想要不被观察的属性数组。

var mappingPeople = {
    'copy': ["name"]
};

var mapping = {
    create: function (opts) {
        return ko.mapping.fromJS(opts.data, mappingPeople);
    }
};
var PeopleArr = ko.mapping.fromJS(people, mapping);

这里是 Working Demo

<强>更新

如果您需要将一个属性标记为可观察,其余属性为普通属性,那么我建议使用observe

此处使用observe

对我的 Example 进行了更新

答案 2 :(得分:0)

我知道这个问题已经过时了,但我遇到了同样的问题,发现了一个简单的解决方案而没有使用任何插件。

让我们说你做了一个get请求,然后返回一系列帖子。对于每个条目,您有一个名为&#34; Favorited&#34;的属性,它是一个布尔值,表示该帖子是否被用户收藏,并且您希望使该属性可观察,以便您可以使用某个函数改变它的状态。

您可以执行以下操作:

function ViewModel() {
  var self = this;
  self.posts = ko.observableArray([]);

  $.getJSON("/api/getPosts", function(data) {
   ko.utils.arrayForEach(data, function(post) {
    post.Favorited = ko.observable(post.Favorited)
   });
   self.posts(data)
  });
}

通过这种方式,您可以将favited属性的值设置为observable,并且可以在arrayForEach方法中对任何属性进行observable同样的操作。