KnockoutJS - 顯示加載和無數據消息

我正在使用KnockoutJS並通過ajax加載我的視圖模型。在加載完成之前，我想顯示一條「Loading ...」消息，如果沒有加載數據，我想顯示「沒有結果」。信息。我最初的嘗試是這樣的：KnockoutJS - 顯示加載和無數據消息

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

我預計第一li元素只會顯示，如果viewModel.mentions.loaded是假的，並viewModel.mentions.data包含一些項目，以及第二li會顯示，直到viewModel.mentions.loaded已設置爲false，但是這兩個項目都會一直顯示。我究竟做錯了什麼？

來源

2012-07-20 Chris

我在使用'''在挖空綁定中遇到了問題，您是否嘗試過== == false？ – sellmeadog 2012-07-20 20:04:39

剛剛做過，結果相同。就像knockoutjs在綁定時甚至不觸及現有的'li'元素。 – Chris 2012-07-20 20:05:32

奇數。因爲我有類似的問題，我通常添加一個'status'屬性到我的視圖模型，並將它綁定到UI中的'';實際的消息是在'ko.computable'中確定的。 – sellmeadog 2012-07-20 20:07:26

當您的列表中有這些靜態項目時，它們實際上並沒有被綁定，因爲Knockout只是處理數組中的每個項目。

一種方式來實現你想要什麼，是做：

<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-20 20:08:55

是的，我認爲這將是最好的方式，並已開始沿着這條路，但無論出於何種原因，當填充數據數組時，KO並未更新綁定。我正在做'ko.mapping.fromJS（result，viewModel.mentions.data）;'沒有任何反應。 – Chris 2012-07-20 20:20:17

我更新了小提琴。如果'mentions.data'沒有被映射插件初始化，那麼你需要把它叫做'ko.mapping.fromJS（result，{}，viewModel.mentions.data）;' – 2012-07-20 20:26:33

所以我發現我正在使用來自JS語法的錯誤。我改變它使用'ko.mapping.fromJS（result，{}，viewModel.mentions.data）;'和一切按預期工作。謝謝！ – Chris 2012-07-20 20:26:42

我使用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-20 20:12:14 sellmeadog

KnockoutJS - 顯示加載和無數據消息

回答

相關問題