淘汰赛JS循环长达值(Knockout js loop up to a value)

我有一个整数观察到， pages ，我想环路最多的在HTML页面如价值。

pages = ko.observable(3) 

产生

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul> 

是否有一个绑定适合这个？

Answer 1:

你可以写这样的事情：

<ul data-bind="foreach: new Array(pages())">
    <li data-bind='text: $index()+1'></li>
</ul> 

这里是工作提琴： http://jsfiddle.net/L8Uy5/

Answer 2:

由阿尔乔姆Vyshniakov答案是一个伟大的快捷方式来获得在这个视图运行不改变视图模型。 但是，如果你希望迅速扩大的设置，或者只是不喜欢有（什么可说是单位可测试逻辑） new Array(pages())在您看来，这里是一个替代的解决方案。 一个额外的好处可能是，你还可以封装$index + 1位：

 function ViewModel() { var self = this; self.pages = ko.observable(3); self.pageArray = ko.computed(function() { var list = []; var length = parseInt(self.pages(), 10); // the <input> makes `pages` a string! for (var i = 1; i <= length; i++) { list.push(i); } return list; }); } ko.applyBindings(new ViewModel()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <input data-bind="textInput: pages" type="number"> <ul data-bind="foreach: pageArray"> <li data-bind="text: $data"></li> </ul> 

该pageArray代码主要是笨重的，因为（a） pages变得因为输入，这可能通过使能更好地解决一串pages到计算的可写的，和（b），因为我选择使用for循环/ 碱性溶液用于创建范围（在这你可以提高 ）。

下面是改善这两点建议的版本：

 function ViewModel() { var self = this, _pages = ko.observable(3); self.pages = ko.computed({ read: () => _pages(), write: newVal => _pages(parseInt(newVal, 10)) }); self.pageArray = ko.computed(() => _.range(1, _pages() + 1)); } ko.applyBindings(new ViewModel()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <input data-bind="textInput: pages" type="number"> <ul data-bind="foreach: pageArray"> <li data-bind="text: $data"></li> </ul> 

无论如何， pageArray及其中的内容现在已经完全单元测试和访问视图模型逻辑的其它位。 （如果你不需要的是，如你只是脚手架的看法，我会说去与其他的答案）。

Answer 3:

如果你只需要一个简单for循环，你可以这样做：

<select name="something"
    data-bind="foreach: new Array(10)">
    <option data-bind="text: $index()+1, value: $index()+1"></option>
</select>

您可以通过更换指定的项目数(10)与任意数量。 这将产生包含数字从1至10的简单下拉菜单。

Answer 4:

它不更新领域的工作

你可以写这样的事情：

这里是工作提琴： http://jsfiddle.net/L8Uy5/

这项工作更好https://jsfiddle.net/L8Uy5/54/

 function ViewModel(){ var self = this; self.pages = ko.observable(3); self.virtual_elements = ko.computed(function(){ var arr = []; for (var i=1; i<=self.pages(); i++) { arr.push('some'); } return arr; }); } ko.applyBindings(new ViewModel()); 

 <input data-bind="value: pages"/> <ul data-bind="foreach: virtual_elements"> <li data-bind='text: $index()+1'></li> </ul> 

文章来源: Knockout js loop up to a value