Question

考虑以下代码：

    $(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函数，我会看到不同的列表项。

令人惊讶的是，我确实收到一条JavasScript错误，指出blancos未定义，因此无法绑定。（但是！span仍然包含文本“[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

这同样适用于其他属性或方法。当我在HTML中使用$ root绑定变量（或函数）时，我不得到错误（但是，它们是空的）。

Answer 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);

Answer 2

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

<li data-bind="foreach: blancos">
    <a href="#" data-bind="text:name"></a>
</li>

Answer 3

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>

激活敲除绑定到文档的特定部分

3 个答案: