Невозможно отобразить observableArray

Question

У меня есть этот код, который я ожидал, чтобы сделать меню, которое запрошенные из REST:

 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 и от того, что я вижу что-то может отсутствовать:

Что может быть не так?

Answer 1

Пробудите следующий путь.

См. 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>

Answer 2

Объекты в вашем меню в вашем инспекторе не имеют свойства имени для привязки. Попробуйте className, или если у вас есть контроль над данными, которые вы получаете, используйте разные имена, такие как name и slug или что хотите.