javascript - 无法渲染 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>