javascript - "Uncaught TypeError: Unable to process binding"与 KnockoutJS

Question

我有这个代码:

<script>
    var viewModel = {};

    $.getJSON("URL", function (data) {
        viewModel = ko.mapping.fromJS(data);
        ko.applyBindings(viewModel);
    });
</script>

我在这段代码中绑定(bind)它:

<!-- ko foreach: { data: object, as: 'object' } -->
   
   <div>
     ... content (with more data-bindings) ...
   </div>

<!-- /ko -->

但我在控制台中收到这些错误:

Uncaught TypeError: Unable to process binding "foreach: function(){return { data:object, as:'object'} }"

Message: Unable to process binding (...)

Message: Cannot read property (...)

我敢肯定这是因为 observable(s) 不是预定义的，当 knockoutJS 试图绑定(bind)它们时，它们根本不存在。

我试过这个:

var viewModel = {
    object: null
    (and other properties)
};

还有这个:

function viewModel() {
var self = this;
...
}

但这并没有帮助。我究竟做错了什么？我知道有很多关于此的问题，但我找不到问题的答案。

Answer 1

您只在您的异步数据返回后才应用绑定(bind)。这并不理想，但至少可以确保不会因绑定(bind)到初始空对象而导致问题。

View 的设置方式要求从服务器接收的数据满足此要求:

• 必须是一个对象
• 必须有一个属性 object
• data.object 的值必须是可迭代的

即:这应该有效:

ko.applyBindings({ object: [] })

如果您的数据是数组，您应该将绑定(bind)重写为:

<!-- ko foreach: { data: $data, as: 'object' } -->
<div>Bind to object.someProp here</div>
<!-- /ko -->

如果您的数据是一个对象，例如:{ object: { a: 1 } } ，您可以删除 foreach 或使用 with 绑定(bind)。

一旦你让它工作，你应该在开始加载你的数据之前尝试应用占位符 View 模型的绑定(bind)。这可确保在加载期间呈现漂亮的 UI。