knockout.js - Knockout js循环到一个值

Question

我有一个可观察的整数，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

如果您只需要一个简单的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 3

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