Нокаут js петли до значения

У меня есть целочисленное наблюдаемое значение, pages, и я хочу, чтобы цикл до значения страниц в html, например.

pages = ko.observable(3)

производит

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

Есть ли привязка, подходящая для этого?

Ответ 1

Вы можете написать примерно следующее:

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

Здесь работает скрипка: http://jsfiddle.net/L8Uy5/

Ответ 2

Ответ Артема Вышнякова - это отличный быстрый способ добиться этого в представлении без изменения модели представления. Однако, если вы планируете быстро развернуть установку или просто не любите иметь (что, возможно, логически проверяемая логика) 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>

Ответ 3

он не работает в поле обновления

Вы можете написать примерно следующее:

Здесь работает скрипка: 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>