Question

我有一个整数observable，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

The answer by Artem Vyshniakov是在视图中运行而不更改视图模型的快速方法。但是，如果您希望快速扩展设置，或者只是不喜欢在您的视图中使用（可以说是可单元测试的逻辑）data1 data2 data3 1 3 3 2 NaN 5 3 4 NaN，那么这是一个替代解决方案。另一个好处可能是您还可以封装print('\n'.join(map( lambda x : str(x[1]) ,(filter(lambda z: z[0] != False, zip(train.isnull().any(axis=0), train.columns.values))) )))位：

＆＃13;

new Array(pages())

＆＃13;

$index + 1

＆＃13;

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());代码主要是笨重的，因为（a）<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变为可写的计算结果可以更好地解决这个问题，并且（b））因为我选择使用pages循环/ 基本解决方案来创建范围（you could improve）。

这是一个改进了两个方面的建议版本：

＆＃13;

pages

＆＃13;

for

＆＃13;

无论如何，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());及其内容现在完全可以单元测试，并且可供其他位视图模型逻辑访问。（如果你不需要它，例如你只是在构建一个视图，我会说其他答案）。

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循环到一个值

4 个答案: