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

Create an array and show each item number of times determined by selected option in KnockoutJs

本文关键字：选项 项目 KnockoutJs 一个 数组 创建 显示      更新时间：2023-09-26

有一个下拉列表：

 <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>

淘汰视图模型和一些粗略的想法：

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

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

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

2） 与其尝试使用computed来填充可观察数组，您应该只让computed返回您想要的数组，或者让一个带有填充它的订阅的可观察数组。

返回数组的计算：

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）

我稍微修改了您的代码，您需要在select中设置一个选定的值，然后在计算中使用它，不过您的想法是正确的。

HTML

<select data-bind="options: numberOfChildren, value: selectedNumberOfChildren" class="mscSelect"></select>

JavaScript

    self.selectedNumberOfChildren = ko.observable();
    self.allChildren = ko.computed(function () {
        var total = 0;
        self.children.removeAll();
        for (var i = 0; i < self.selectedNumberOfChildren(); i++) {
            self.children.push(new Child(""));
        }    
    });

http://jsfiddle.net/2prhq5v2/5/

相关文章：