Question

对于导航菜单，我有两组链接，每组和链接显示或不依赖于用户的角色。在构建链接结构时会查找角色，并相应地构建链接列表。返回的JSON被解析，放入可观察的数组中没有问题，但是当我实际尝试并应用绑定时，绑定失败，因为observable是空白的。这是HTML ...

<ul id="user-menu" class="menu" data-bind="foreach: areas">
    <li>
        <a data-bind="attr: { href: areaLink }">
            <img data-bind="attr: { src: iconUri }" />
            <span data-bind="text: areaName"></span>
        </a>
    </li>
</ul>
<ul id="admin-menu" class="menu" data-bind="foreach: adminAreas">
    <li>
        <a data-bind="attr: { href: areaLink }">
            <img data-bind="attr: { src: iconUri }" />
            <span data-bind="text: areaName"></span>
        </a>
    </li>
</ul>

后台的淘汰视图模型......

var navigation = (function() {

    function Area() {
        var self = this;

        self.areaName = ko.observable();
        self.areaLink = ko.observable();
        self.iconUri = ko.observable();
        self.sequenceNo = ko.observable();
        self.isAdmin = ko.observable();

        self.loadFromVM = function (vm) {
            self.areaName(vm.name || '');
            self.areaLink(vm.link || '');
            self.iconUri(vm.iconUri || '');
            self.sequenceNo(vm.sequenceNo || '');
            self.isAdmin(vm.isAdmin);
        }
    }

    function viewModel() {
        var self = this;

        self.areas = ko.observableArray([]);
        self.adminAreas = ko.observableArray([]);

        self.setup = function () {
            var data = {}; // population with basic session data

            $.getJSON('....php', { JSON.stringify(data) }, function (results) {
                for (var i = 0; i < results.length; i++) {
                    var area = new Area();

                    area.loadFromVM(results[i]);

                    if (area.isAdmin()) {
                        self.adminAreas().push(area);
                    } else {
                        self.areas().push(area);
                    }
                }
            });
        };
    }

    var vmInstance;

    return {
        setup: function () {
            vmInstance = new viewModel();

            vmInstance.setup();

            ko.applyBindings(vmInstance, $('#user-menu')[0]);
            ko.applyBindings(vmInstance, $('#admin-menu')[0]);
        }
    };

})();

然后我将它与导航视图文件中的一起...

    navigation.setup();

所以在我收回JSON之后，解析它，并在我循环$.getJSON方法的成功函数时组织它，将注意放在self.areas()和self.adminAreas()确实显示数组具有我想要的确切信息。但是当它们必须被应用时，调用vmInstance.areas().length或vmInstance.adminAreas().length将返回零。更奇怪的是，在$.getJSON调用之后但在setup()函数内放入数组长度的警报将导致警报首先触发，显示零，然后通过get，填充数组，然后再次发出零。

不完全确定这里发生了什么，但我不记得在另一个项目中看到这种行为所以我不太确定我在这里做错了什么。任何想法或建议将不胜感激。

编辑：没关系小提琴。它并没有真正捕捉到我的实际错误。

Answer 1

adminarea对象未初始化。您创建了adminArea变量，但是您使用相同的区域变量来设置值。

    var adminArea = new Area();

    adminArea.areaName('test admin area'); 
    adminArea.areaLink('#');
    adminArea.iconUri('http://evernote.com/media/img/getting_started/skitch/windows8/win8-checkmark_icon.png');
    adminArea.sequenceNo(1);
    adminArea.isAdmin(true);

Fiddle Demo

将knockout可观察数组绑定到多个<ul>元素</ul>

1 个答案: