在Knockout.js中复制一个数组

时间:2012-06-22 15:52:13

标签: javascript jquery knockout.js

我正试图为暗黑破坏神3制作一个小伤害计算器(我知道,我知道)。

基本上这个想法是它有一个“前”和“后”数组,代表你角色的项目。当更新后,“after”数组应该复制“before”数组。但是,对“after”数组的更改应更新“before”数组。

然后每个阵列显示一个DPS(更多这是更好的)总计,它会显示两者之间的差异。这个想法是在使用游戏中的拍卖行时可以轻松比较两个项目。

我已经设置了第一位 - “之前”阵列运行良好。然而,我不知道如何创建“后”数组,我想知道我是否已经使这个复杂程度不同。我应该使用两个视图模型,在jQuery中复制它,还是使用映射插件?我无法找到任何我正在追求的东西,UI要求尤其看起来有点棘手

我要去的地方:http://jsfiddle.net/kimadactyl/GuMuY/8/

1 个答案:

答案 0 :(得分:2)

这是一个可以帮助您入门的解决方案。我重构了你的HeroItem以获取配置对象和可选的链接英雄。

我现在假设数组是固定长度的。我通过将项映射到新的after从items数组创建HeroItem数组,使用jquery extend进行深层复制。

当在HeroItem中传递link时,将订阅其可观察对象的更改并仅按指定单向更新。

function HeroItem(config, link) {
    var self = this, prop;
    self.item = config.item;
    self.int = ko.observable(config.int);
    self.ias = ko.observable(config.ias);
    self.critdmg = ko.observable(config.critdmg);
    self.critpc = ko.observable(config.critpc);
    self.min = ko.observable(config.min);
    self.max = ko.observable(config.max);

    if (link) {
        for (prop in link) {
            if (link.hasOwnProperty(prop) && ko.isObservable(link[prop])) {     
                console.log("subscribing " + prop);
                link[prop].subscribe((function(p) {
                    return function (newValue) {
                        console.log("updating " + p+ " to " + newValue);
                        self[p](newValue);
                    }
                })(prop));
            }
        }        
    }
}

self.after = ko.observableArray(ko.utils.arrayMap(self.items(), function(i) {
    return new HeroItem($.extend({}, ko.toJS(i)), i);
}));

http://jsfiddle.net/madcapnmckay/2MNFn/1/

不需要自定义绑定,它只使用所有KO observable所具有的订阅功能。如果你想扩展它来处理动态长度数组,那么简单地订阅items数组并相应地清理after数组。

希望这有帮助。