创建一个数组，并显示由选择的选项中KnockoutJs

确定的时间的每个项目号码有一个下拉：创建一个数组，并显示由选择的选项中KnockoutJs

<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

来源

2014-11-03 mishap

你选择为孩子心不是任何地方将所选择的值。您可以订阅该值，然后调用函数将其添加到列表 – segFault 2014-11-04 00:07:12

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

1）您的选择需要一个值绑定来保存所选值;你不能做self.numberOfChildren().value，你需要一个viewmodel observable来保存这个值。（所以你的数据绑定应该是这样的<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）

来源

2014-11-04 01:57:49 Retsam

很好的解释，谢谢。 – mishap 2014-11-04 15:02:54

我稍微修改你的代码，你需要设置在你选择一个选择的值，然后在你的计算机使用它，你有正确的想法，但。

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/

来源

2014-11-04 02:45:23 TysonWolker

创建一个数组，并显示由选择的选项中KnockoutJs

回答

相关问题