knockout.js - 値までのノックアウト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追加の利点の 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>

(a) 入力のために文字列になるため、pageArrayコードはほとんどかさばり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>