javascript - ビューモデルでデータバインドが機能しませんでした

Question

これは単純なビューモデルです

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()

どうして？？？

Answer 1

HTML が次のようになっているとします。

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

次に、問題は2番目のデータバインディングにあります。バインディングを行うと、foreachそのブロック内のすべてのバインディングが foreach の現在の要素のコンテキストを取得します。したがって$data、配列内のメンバーを参照します。

次のようになります。

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

nameは現在のバインディング コンテキストのプロパティであるためです。

Answer 2

交換 ：

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

に

data-bind='text:name'