0

考虑这段代码：

    $(document).ready(function () {
        var menuView = function() {
            var self = this;
            this.blancos = ko.observableArray([]);

            this.load_blancos = function() {
                $.getJSON("{% url api_template_list_create %}", function (data) {
                    ko.mapping.fromJS(data, {}, self.blancos);
                })
            };

            this.init = function() {
                self.load_blancos();
            };

            this.init();
        };

        ko.applyBindings(new menuView(), document.getElementById('blancos_menu'));
    });

这个HTML：

    <ul class="dropdown-menu" id="blancos_menu">
    <li><a href="{% url template_planning %}">Create new</a></li>
    <li class="divider"></li>
    <span data-bind="text: $root.blancos"></span>
    <!-- ko foreach: $root.blancos -->
    <li>
        <a href="#" data-bind="text:name"></a>
    </li>
    <!-- /ko -->
    </ul>

ko:foreach 函数不执行（即不生成列表项）。我确实在前面的范围中看到了“[object Object]，[object Object]”（用于测试目的）。

出于一个非常奇怪的原因，当我将行更改为 时<span data-bind="text: $root.blancos"></span>，<span data-bind="text: blancos"></span>执行了 ko: foreach 函数，我可以看到不同的列表项。

令人惊讶的是，我确实收到了一个 JavaScript 错误，指出 blancos 未定义，因此无法绑定。（但是！跨度仍然包含文本“[object Object]，[object Object]”）。

我真的无法解决它；感谢您查看这个。

顺便说一下，JSON调用返回的数据是：

[{"id": 1, "name": "123"}, {"id": 2, "name": "test_wzzob"}]

更新

改变

ko.mapping.fromJS(data, viewModel);

进入

ko.mapping.fromJS(data, {}, self.blancos);

确实可以，但仍然有错误

Uncaught Error: Unable to parse bindings.
Message: ReferenceError: blancos is not defined;
Bindings value: foreach: blancos

这同样适用于其他属性或方法。在使用 $root 绑定在 HTML 中的变量（或函数）之前，我没有收到该错误（但是，它们是空的）。

4

3 回答 3

1

文档说：

// Every time data is received from the server:
ko.mapping.fromJS(data, viewModel);

但是您提供 observableArray 而不是 View Model：

ko.mapping.fromJS(data, {}, self.blancos);

试试这个方法：

ko.mapping.fromJS({ blancos: data }, {}, self);
于 2013-02-18T12:49:57.803 回答
0

当您只使用 blancos 而不是 $root.blancos 时会发生什么？您不需要根，因为 blancos 是您绑定到页面的该部分的视图模型的属性：

<li data-bind="foreach: blancos">
    <a href="#" data-bind="text:name"></a>
</li>
于 2013-02-18T12:29:02.837 回答
-1 
ko.applyBindings(new menuView(), document.getElementById('blancos_menu'));

将其替换为

ko.applyBindings(new menuView(),$("#blancos_menu")[0]);

为什么你用这个？

<span data-bind="text: $root.blancos"></span>
    <!-- ko foreach: $root.blancos -->

您可以使用

<ul data-bind="foreach: blancos">
<li data-bind="<ARRAY ELEMENT IN blancos>"></li>
</ul>
于 2013-02-18T12:28:58.697 回答