无法呈现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

回答

相关问题