在创建项目后将项目推送到使用映射插件创建的 observableArray答案

【问题标题】：Pushing an item to an observableArray created with the mapping plugin after it's created在创建项目后将项目推送到使用映射插件创建的 observableArray
【发布时间】：2012-12-04 13:08:05
【问题描述】：

我有一个看起来像这样的淘汰视图模型：

var TagViewModel = function (allPrincipals) {
    var self = this;

    self.name = ko.observable(tagName);

    var principalMapping = {
        create: function(options) {
            return {
                label: options.data.name,
                key: options.data.type + '___|' + options.data.name,
                icon: options.data.type == "User" ? "img/misc/user20.png" : "img/misc/group20.png"
            };
        },
        key: function(data) {
            return data.key;
        }
    };

    self.allPrincipals = ko.mapping.fromJS(allPrincipals, principalMapping);
}

allPrincipals 看起来像这样：

var allPrincipals = [{name: "Alex" type: "User"}, {name: "John", type: "User"}, {name: "Staff", type: "Group}]

所以，当 viewModel 被创建时，我们有类似的东西：

var vm = new TagViewModel(allPrincipals);

这很好用。

但是，在视图模型中，我需要能够将新项目推送到 allPrincipals 可观察数组（由映射插件创建）

最好的方法是什么？

例如，视图模型上有一个函数：

self.addPrincipal = function(prinipal){
    //allPrincipals.push(?)
}

【问题讨论】：

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

您可以定义一个类来创建Principal 对象：

function Principal(data){
   var self = this;

   self.label = data.name;
   self.key = data.type + '___|' + data.name;
   self.icon = data.type == "User" ? "img/misc/user20.png" : "img/misc/group20.png";
}

然后在映射选项和addPrincipal函数中使用它：

var principalMapping = {
    create: function(options) {
        return new Principal(options.data);
    },
    key: function(data) {
        return data.key;
    }
};

self.addPrincipal = function(prinipal){
    self.allPrincipals.push(new Principal(prinipal));
}

【讨论】：