javascript - 创建一个数组并显示每个项目的次数，由 KnockoutJs 中所选选项决定

Question

有一个下拉菜单:

 <div class="divInfoMargin">
        There are
        <select data-bind="options: numberOfChildren" class="mscSelect"></select>
 </div>

我需要显示上面选择的以下次数:

<div data-bind="foreach: children">
        <div>
            Name: <input data-bind="value: name" type="text" />
            Date Of Birth <input type="text" data-bind="value: dob" class="datepicker" />
            Residence :
            <select data-bind="value: residence" name="residence" id="residence">
                <option value="0">1</option>
                <option value="1">2</option>
                <option value="2">3</option>

            </select>
        </div>
</div>

knockout View 模型和一些粗略的想法:

function Child(name, dob) {
        var self = this;
        self.name = name;
        self.dob = dob;
}

function AppViewModel() {
    var self = this;

    self.numberOfChildren = ko.observableArray(['1', '2', '3', '4', '5', '6']);

    //this array needs to be added to:
    self.children = ko.observableArray([]);

    //self.addChild = function() {
    //    self.children.push(new Child(""));
    //};

      //This is not working code:
      self.allChildren = ko.computed(function () {
      var total = 0;
      for (var i = 0; i < self.numberOfChildren().value; i++) {
          self.children.push(new Child(""));
      }    
    });
}

ko.applyBindings(new AppViewModel());

我对 KO 完全陌生并且很困惑。这是JSFiddle

Answer 1

您的代码有两个主要问题:

1) 您的选择需要一个值绑定(bind)来保存所选值；你不能这样做self.numberOfChildren().value ，您需要一个可观察的 View 模型来保存该值。 (所以你的数据绑定(bind)应该类似于 <select data-bind="options: numberOfChildren, value: currentNumberOfChildren">

2) 您不应该尝试使用计算来填充可观察数组，而应该让计算返回您想要的数组，或者拥有一个带有填充它的订阅的可观察数组。

计算后返回数组:

self.children = ko.computed(function () {
    var children = [];
    for (var i = 0; i < self.currentNumberOfChildren(); i++) {
        children.push(new Child(""));
    }   
    return children;
});

具有订阅的可观察数组:

self.children = ko.observableArray([]);
//Update self.children wehenver currentNumberOfChildren changes
self. currentNumberOfChildren.subscribe(function () {
    var children = [];
    for (var i = 0; i < self.currentNumberOfChildren(); i++) {
        children.push(new Child(""));
    }   
    self.children(children);
});

第一个更简单，但它不是一个可观察的数组，因此没有像 self.children.push 这样的辅助方法(事实上​​，它是只读的)，但我个人会选择第一条路线。

(工作 JSFiddle )