Javascript 使用KnockoutKS管理阵列中的阵列

我在数组中有一个数组，例如，我有以下对象：

{ruleGroups: [{ 
  rules: [{ 
       dataField1:ko.observable()
      ,operator:ko.observable()
      ,dataField2:ko.observable()
      ,boolean:ko.observable()
      ,duration:ko.observable()
     }] 
   }] 
};

如何在数组中编辑数组

我能够改进该问题，但在添加组时添加行仍有问题，新组可以工作，但旧组已失效： 这里有一个工作示例（）

Javascript:

var dataFields = function() {
    var fields = [];
    fields.push("datafield1");
    fields.push("datafield2");
    return fields;
 };

var operators = function() {
    var operator = [];
     operator.push("Plus");
     operator.push("Minus");
     operator.push("Times");
     operator.push("Divided By");
     return operator;
};

var booleanOperators = function() {
    var operator = [];
    operator.push("Equal");
    operator.push("Not Equal");
    operator.push("Greater Than");
    operator.push("Less Than");
    operator.push("Contains");
    operator.push("Etc...");
    return operator;
};

var ruleObj = function () {
    return {
        dataField1:ko.observable()
        ,operator:ko.observable()
        ,dataField2:ko.observable()
        ,boolean:ko.observable()
        ,duration:ko.observable()
    }
};

var ruleGroup = function() {
    return rg = {
        rules:  ko.observableArray([new ruleObj()]),
        addRow: function() {               
              rg.rules.push(new ruleObj());
              console.log('Click Add Row', rg.rules);
        },
        removeRow : function() {
              if(rg.rules().length > 1){
                  rg.rules.remove(this);
              }
        }
    }
};

var ViewModel = function() {
    var self = this;
    self.datafields = ko.observableArray(dataFields());
    self.operators = ko.observableArray(operators());
    self.booleanOperators = ko.observableArray(booleanOperators());

    self.groupRules = ko.observableArray([new ruleGroup()]);

    self.addGroup = function() {
         self.groupRules.push(new ruleGroup());
    };

    self.removeGroup = function() {
        if(self.groupRules().length > 1){
            self.groupRules.remove(this);
        }
    };

    self.save = function() {
        console.log('Saving Object', ko.toJS(self.groupRules));
    };

};
ko.applyBindings(new ViewModel()); 

HTML

<div data-bind="foreach: { data: groupRules, as: 'groupRule' }" style="padding:10px;">
    <div>
        <div data-bind="foreach: { data: rules, as: 'rule' }" style="padding:10px;">
            <div>
                <select data-bind="options: $root.datafields(), value: rule.dataField1, optionsCaption: 'Choose...'"></select>
                <select data-bind="options: $root.operators(), value: rule.operator, optionsCaption: 'Choose...'"></select>
                <select data-bind="options: $root.datafields(), value: rule.dataField2, optionsCaption: 'Choose...',visible: operator"></select>
                <select data-bind="options: $root.booleanOperators(), value: rule.boolean, optionsCaption: 'Choose...'"></select>
                <input data-bind="value: rule.duration" />
                <span data-bind="click: groupRule.addRow">Add</span>
                <span data-bind="click: groupRule.removeRow">Remove</span> 
            </div>
        </div>
        <span data-bind="click: $parent.addGroup">[Add Group] </span>
        <span data-bind="click: $parent.removeGroup">[Remove Group]</span>
    </div>
</div>
<div>
    <span data-bind="click:save">[Save]</span>
</div>

添加
去除
[添加组]
[删除组]
[保存]

我通过将规则组的功能重新安排为：

var ruleGroup = function() {
    var rg = {
        rules:  ko.observableArray([new ruleObj()]),
        addRow: function() {               
                  rg.rules.push(new ruleObj());
                  console.log('Click Add Row', rg);
        },
        removeRow : function() {
            if(rg.rules().length > 1){
                rg.rules.remove(this);
            }
        }
    }

    return rg;
};

不太清楚为什么会有不同，但我认为这是因为现在正在创建和引用一个新的var。 在这里可以找到正在工作的JSFIDLE