4

KnockoutJSを使用しており、ajaxを介してビューモデルを読み込んでいます。ロードが完了する前に、「Loading ...」というメッセージを表示したいのですが、データがロードされていない場合は、「Noresults」を表示したいと思います。メッセージ。私の最初の試みは次のようになります。

<ul data-bind="template: { name: 'mentions-template', foreach: mentions.data }">
    <li data-bind="visible: mentions.loaded() && mentions.data().length < 1">No mentions</li>
    <li data-bind="visible: !mentions.loaded()">Loading...</li>
</ul>


<script type="text/javascript">

    var viewModel = {
        mentions: {
            loaded: ko.observable(false),
            data: ko.observableArray()
        }
    }

    function loadData() {
       $.post(action, function(result) {
           viewModel.mentions.data = ko.mapping.fromJS(result);
           viewModel.mentions.loaded(true);
           ko.applyBindings(viewModel);
       });   
    } 

    ko.applyBindings(viewModel);
    loadData();    
</script>

最初の要素はfalseでいくつかの項目が含まれているli場合にのみ表示され、2番目の要素はfalseに設定されるまで表示されると予想しましたが、両方の項目が常に表示されます。私は何が間違っているのですか？viewModel.mentions.loadedviewModel.mentions.dataliviewModel.mentions.loaded

4

2 に答える 2

5

これらの静的アイテムがulリスト内にある場合、Knockout は配列内の各アイテムを処理するだけなので、それらは実際にはバインドされません。

あなたが望むものを達成する1つの方法は、次のことです：

<ul>
    <!-- ko template: { name: 'mentions-template', foreach: mentions.data } -->
    <!-- /ko -->
    <li data-bind="visible: mentions.loaded() && mentions.data().length < 1">No mentions</li>
    <li data-bind="visible: !mentions.loaded()">Loading...</li>
</ul>

サンプル: http://jsfiddle.net/rniemeyer/gw7bM/

于 2012-07-20T20:08:55.417 に答える
2

visibleバインディングを使用すると、予期しない動作で同様の問題が発生しました。次のようなことを試してください。

var ViewModel = {
  mentions: {
    loaded: ko.observable(),
    data: ko.observableArray(),
    status: ko.computed(function () {
      if (loaded() && data().length < 1)
        return 'No Mentions';

      else
        return 'Loading...';
    });
}

ビューを次のように更新します<span>。

<span data-bind="text: status, visible: loaded"></span>
于 2012-07-20T20:12:14.060 に答える