無法呈現observableArray

我有這樣的代碼，我期待着呈現，其從靜止查詢菜單：無法呈現observableArray

 var PageViewModel = function() { 
      var self = this; 
//     self.menus = [ 
//      { name: 'Foor', slug: 'foo'}, 
//      { name: 'Bar', slug: 'bar'}, 
//      { name: 'Fam', slug: 'fam' } 
//     ]; 
      self.menus = ko.observableArray(); 
      var result = query.find({ 
       success: function(results) { 
        console.log("Successfully retrieved " + results.length + " menus."); 
        var menus = []; 
        for (var i = 0; i < results.length; i++) { 
         var object = results[i]; 
         console.log(JSON.stringify(object)); 
         menus.push(object); 
        } 
        self.menus(menus); 
       }, 
       error: function(error) { 
        console.log("Error: " + error.code + " " + error.message); 
       } 
      }); 
      console.log('Menus = ' + JSON.stringify(self.menus)); 
      this.transitionTo = function(slug) { 
       window.location.href = slug + ".html"; 
      } 
     }

HTML：

<ul class="uk-text-center" data-bind="foreach: menus()"> 
    <li class=""> 
     <button class="button button-white uk-margin-bottom"><span data-bind="text: name">Foo</span></button> 
    </li> 
</ul>

的問題是，菜單呈現列表但名字是空的。但是，如果我只是讓代碼使用靜態數組，它可以正常工作。有了這個，我試着用Chrome瀏覽器和調試我所看到的東西可能會丟失：

出了什麼問題嗎？

來源

2016-05-26 xybrek

可否請你暴露更多一點的HTML？還有，控制檯輸出中有什麼？您可能需要使用'foreach：menus（）'，但需要更多詳細信息，謝謝 – brianlmerritt

我添加了HTML代碼。另外，如果我將代碼更改爲'foreach：menus（）'錯誤爲'消息：菜單不是函數' – xybrek

您的'results'數組中沒有暴露屬性的'Parse.Object'，所以你需要將它們轉換爲JSON，然後傳遞給Knockout'menus.push（object.toJSON（））;' – nemesv

請嘗試以下方法。

有關如何使用的更多信息，請參閱foreach-binding。

希望這可以解決您的問題。對代碼進行了更改。

var PageViewModel = function() 
 
{ 
 
      var self = this; 
 
    
 
      self.menus = ko.observableArray([]); 
 
      var result = query.find(
 
       { 
 
       success: function(results) 
 
       { 
 
        console.log("Successfully retrieved " + results.length + " menus."); 
 
        var menus = []; 
 
        
 
        for (var i in results) 
 
        { 
 
         var object = results[i]; 
 
         
 
         menus.push(object.toJSON()); 
 
        } 
 
        self.menus(menus); 
 
       }, 
 
       error: function(error) { 
 
        console.log("Error: " + error.code + " " + error.message); 
 
       } 
 
      }); 
 
      
 
      this.transitionTo = function(slug) { 
 
       window.location.href = slug + ".html"; 
 
      } 
 
     } 
 

 
ko.applyBindings(new PageViewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div> 
 
    <ul class="uk-text-center" data-bind="foreach: menus"> 
 
    <li class=""> 
 
     <button class="button button-white uk-margin-bottom"><span data-bind="text: name">Foo</span></button> 
 
    </li> 
 
</ul> 
 
</div>

來源

2016-05-27 06:12:26 Shrabanee

的正下方 - 但爲了提高性能，請將它推到本地'menus'數組，然後使用'self.menus（menus）'。這樣您每個數據項更新一次observable，並且每次觸發刷新。 – brianlmerritt

這種方式我從來沒有使用過。我曾經按照我在代碼中編寫的方式進行操作。那麼除了HTML代碼的變化之外，代碼中的問題和答案不會有任何區別。 – Shrabanee

ps - 如果數據已經是一個數組，那麼'length'測試和'for'可以被刪除，並且只需要去'self.menus（results）' – brianlmerritt

檢查器中的菜單數組中的對象沒有要綁定的名稱屬性。嘗試className，或者如果您可以控制所獲得的數據，請使用不同的名稱，如name和slug或任何您想要的。

來源

2016-05-27 04:30:27 steezeburger

無法呈現observableArray

回答

相關問題