数据绑定在视图模型上不起作用答案

【问题标题】：data-bind didnt work on view model数据绑定在视图模型上不起作用
【发布时间】：2013-06-19 20:09:43
【问题描述】：

这是一个简单的视图模型

var Cake=function(id,name,price,image)
{
    this.id=ko.observable(id);
    this.name=ko.observable(name);
    this.price=ko.observable(price);
    this.image=ko.observable(image);
};
var oldCakes=ko.observableArray(
[
    new Cake('HSJ525','Name of the Cake',54.30,'http://placehold.it/160x100'),
    new Cake('HSJ526','Other Cake',64.30,'http://placehold.it/160x100'),
    new Cake('HSJ527','Another roquefort',84.30,'http://placehold.it/160x100'),
    new Cake('HSJ528','AndTheLast',44.30,'http://placehold.it/160x100'),
])

var viewModel=function()
{
    var self=this;
    self.cakeBox=oldCakes;

}
window.view_model = new viewModel();
ko.applyBindings(window.view_model);

这是Html

div.span12(data-bind='foreach:cakeBox')
                        div.row-fluid
                            div.span4
                                span(data-bind='text:$data.cakeBox().name()')

这是错误

Uncaught Error: Unable to parse bindings.
Message: TypeError: Object [object Object] has no method 'cakeBox';
Bindings value: text:$data.cakeBox().name()

为什么？？？

【问题讨论】：

那不是 HTML。您的 HTML 实际上是什么样的。

标签： javascript mvvm knockout.js knockout-2.0

【解决方案1】：

假设您的 HTML 看起来像这样：

<div data-bind="foreach:cakeBox">
    <span data-bind="text:$data.cakeBox().name()"></span>
</div>

那么您的问题在于第二个数据绑定。当您执行foreach 绑定时，该块中的所有绑定都将获取 foreach 中当前元素的上下文。所以$data 指的是数组中的一个成员。

它应该是什么样子：

<span data-bind="text:name"></span>

因为name 是当前绑定上下文的属性。

【讨论】：

@andrescabana86：我以为我做到了。阅读foreach 绑定上的knockout docs 了解更多信息。

【解决方案2】：

替换：

 data-bind='text:$data.cakeBox().name()

由

data-bind='text:name'

【讨论】：

您甚至不需要$data 部分。或者括号。