Knockout.js：在模板中绑定到数组外部的可观察属性

Question

I'm trying to bind part of a template to a property that is on the root of my data model, while building the template off an observable array.

This jsfiddle: http://jsfiddle.net/mgxyE/2/ illustrates compactly what I'm trying to accomplish.

the span <span data-bind='text: message'></span> is what is failing because I can't figure out how to set up that binding inside a template. Any help?

Answer 1

If your viewmodel has global scope, then you can simply do:

<span data-bind='text: model.message'></span>

In your fiddle, you would want to change the option from onLoad to no wrap (body) for how the JavaScript is loaded.

Another options is to pass the value in via templateOptions . This would look like:

<div data-bind='template: {name :"nodeTemplate", foreach: nodes, templateOptions: { myMessage: message} }'></div>

Then, bind to it like (you could call it message, just used myMessage to show where the name comes from):

<span data-bind='text: $item.myMessage'></span>

Finally, if you use KO 1.3 beta , which I would recommend, then you can simply do:

<span data-bind='text: $root.message'></span>

Answer 2

With Knockout JS 1.3, you can use the parent binding context:

http://jsfiddle.net/Afx6d/