2011-11-09 91 views
5

在knockoutjs 1.2.1我可以這樣做:傳遞選項模板淘汰賽1.3

<div data-bind="template: {name: 'Bar', foreach: persons, templateOptions:{fooMode: true} }"/> 

<script id='Bar'> 
    {{if $item.fooMode}} FOO! {{/if}} 
</script> 

我已經試過翻譯淘汰賽1.3.0beta作爲

<div data-bind="template: {name: 'Bar', foreach: persons, templateOptions:{fooMode: true} }"/> 

<script id='Bar'> 
    <span data-bind="if: $item.fooMode">FOO!</span> 
</script> 

但新的本地模板引擎不尊重templateOptions。

有沒有其他方法可以將任意數據傳遞到模板中?

回答

8

正如您發現的,本地模板引擎不支持templateOptions,它是jQuery Template插件的options功能的封裝。

您可以使用的兩種方法: 將數據放在您的視圖模型上,並在模板中使用$root.fooMode$parent.fooMode。這將是最簡單的選擇。

否則,如果你不希望在您的視圖模型中的價值,那麼你可以使用自定義綁定操作上下文,如:

ko.bindingHandlers.templateWithOptions = { 
    init: ko.bindingHandlers.template.init, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, context) { 
     var options = ko.utils.unwrapObservable(valueAccessor()); 
     //if options were passed attach them to $data 
     if (options.templateOptions) { 
      context.$data.$item = ko.utils.unwrapObservable(options.templateOptions); 
     } 
     //call actual template binding 
     ko.bindingHandlers.template.update(element, valueAccessor, allBindingsAccessor, viewModel, context); 
     //clean up 
     delete context.$data.$item; 
    } 
} 

這裏是使用一個樣本:http://jsfiddle.net/rniemeyer/tFJuH/

請注意,在foreach方案中,您可以在$parent.$item上找到您的選項,而不僅僅是$item

+0

非常感謝。我有一種感覺,綁定手柄可能會讓我想到我想要的地方,但要花費很長時間才能弄清楚。 – Greg

+0

謝謝,這對我幫助很大。雖然它最初並沒有工作,但我通過改變context。$ data。$ item到上下文。$ templateOptions來代替它。 – Stuntbeaver

+0

請注意,在第一次應用綁定後,選項($ item)不會被傳遞 - 因爲它們被刪除 - 這使得添加和修改元素不可用 –