0

ノックアウトバインディングを持つ要素をDOMにロードする必要がある状況にありますが、これらのバインディングを常に評価する必要はありません。次の例では、意味については内部divを参照してください。

<ul data-bind="foreach: planets">
    <li>
        Planet: <b data-bind="text: name"> </b>
        <div data-bind="if: capital">
            I still want to load this text for later display, when I define "capital"
            Capital: <b data-bind="text: capital.cityName"> </b>
        </div>
    </li>
</ul>


<script>
    ko.applyBindings({
        planets: [
            { name: 'Mercury', capital: null }, 
            { name: 'Earth', capital: { cityName: 'Barnsley' } }        
        ]
    });
</script>

私の特定のシナリオは、DOMにロードしている要素の「編集中」と「編集なし」のテンプレートがあり、どちらもページにロードされているというものです。この要素の新しいインスタンスをページに追加すると、「編集していない」テンプレートが読み込まれ、まだ定義されていない値が検索されるため（ユーザーが新しいオブジェクトに追加しているため）、問題が発生します。

私の特定の例：

<!-- ko foreach: books -->
    <div data-bind="visible: !editing()" class="row-fluid card-box">
        <div data-bind="visible: !isPaperback()"> // I want to load this but not evaluate the isPaperback because the user hasn't defined that yet - currently getting null reference errors here  
        </div>
    </div>
    <div data-bind="visible: editing" class="row-fluid card-box">

    </div>
<!-- /ko -->

私が考えることができる1つの解決策は、上記の私の質問と対になっていますが、これを機能させるためのより良い方法があれば、私は間違いなく提案を受け入れます。ユーザーが「追加」をクリックすると「books」配列にプッシュされる「newBook」オブジェクトのデフォルト値をnull以外にする方がよいでしょうか。

4

1 に答える 1

1

1つのオプションは、capitalプロパティを監視可能にし、ifバインディングを使用して領域を制限することです。次に、データを入力するcapitalと、バインディングが反応してコンテンツを表示します。

サンプルは次のとおりです。

var Planet = function(data) {
   this.name = data.name;
   this.capital = ko.observable(data.capital);
};

var viewModel = {
    planets: [
        new Planet({ name: 'Mercury', capital: null }),
        new Planet({ name: 'Earth', capital: { cityName: 'Barnsley' } })
    ]
}

ko.applyBindings(viewModel);

//populate capital in 2 seconds
setTimeout(function() {
    viewModel.planets[0].capital({ cityName: "Gotham" });
}, 2000);

http://jsfiddle.net/rniemeyer/QqPfV/

于 2013-03-26T00:37:37.973 に答える