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

检查器中menus菜单数组中的对象没有要绑定的name属性。试试className，或者如果您可以控制所获得的数据，请使用不同的名称，例如name和slug或任何您想要的名称。

无法呈现observableArray

2 个答案: