2012-01-09 62 views
7

我所遇到的,我有這樣的代碼我的模板調用幾種情況:將參數傳遞到KnockoutJS模板擴展語法

<!-- ko template: {name: 'paginatedList', 
        data: {listContainer: paginatedResults, itemTemplate: $parent.template}} --> 
<!-- /ko --> 

因爲除了我的數據對象(例如,paginatedResults),我需要傳遞補充信息,例如用於渲染項目的模板名稱。作爲另一個例子,當呈現列表中的項目時,我可能需要知道存儲在某個上下文中的過濾器的當前設置,該過濾器邏輯上遠離列表中的項目。

而不是必須扭曲我的數據模型(在上述例子中,與{listContainer: paginatedResults, itemTemplate: $parent.template}}替換paginatedResults,這將是很好會對模板的位語法的,讓我繞過(和acccrue作爲模板被分層求值)一些額外的背景下,呈現本身時,深度嵌套的模板可能需要。

我猜我想知道的是增加一個額外的參數(可選)爲ko.bindingHandlers功能(initupdate),以使它們看起來像的可行性這個:

function (element, 
      valueAccessor, 
      allBindingsAccessor, 
      viewModel, 
      bindingContext, 
      context) 

當編碼上面的例子中,我應該可以說類似

<!-- ko template: {name: 'paginatedList', 
        data: paginatedResults, 
        context: {itemTemplate: $parent.template}} --> 
<!-- /ko --> 

或更好,但

<!-- ko template: {name: 'paginatedList', 
        data: paginatedResults, 
        itemTemplate: $parent.template} --> 
<!-- /ko --> 

,並有itemTemplate成爲一個變量可以參考我在嵌套模板和data-bind屬性。

這是否有意義?我沒有很好的理解這將實施多麼困難。我想一件值得擔心的是名稱衝突,但是一些命名約定可能會繞過名稱衝突。

基因

回答

9

無需改動淘汰賽核心,我認爲你能做的最好的是一個包裝結合創建類似你當前正在傳遞什麼樣的結構。

綁定可能看起來像:

ko.bindingHandlers.templateWithContext = { 
    init: ko.bindingHandlers.template.init, 
    update: function(element, valueAccessor, allBindings, data, context) { 
     var options = ko.utils.unwrapObservable(valueAccessor()); 

     ko.utils.extend(context, options.context); 

     return ko.bindingHandlers.template.update.apply(this, arguments); 
    } 
}; 

你會這樣稱呼它:

<div data-bind="templateWithContext: { name: 'itemsTmpl', data: items, context: { title: 'First' } }"></div> 

這裏有一個例子:http://jsfiddle.net/rniemeyer/QNvFn/

看起來你正在使用本機的模板,但如果您仍在使用jQuery模板,那麼它確實包含使用jQuery模板的options功能的templateOptionsfeature傳遞上下文數據。這在本地模板中不可用。現在的一般建議是使用$root,$parent$parentsvariables來訪問信息或按照您在文章中描述的方式傳遞對象爲data

+0

謝謝!我同意這種做法是正確的,但不足以保證額外的綁定處理程序。看看這種模式在複雜應用中出現的頻率會很有趣。 – 2012-02-02 19:01:52

+0

謝謝它幫助我很多。如果我編寫模板包裝器,我可以在'init'中設置模板名稱嗎? – tbruyelle 2012-02-14 13:22:29

+0

@tbruyelle - 你絕對可以設置名稱。這個想法是,在你的包裝器綁定中,你建立了你想要傳遞給真實模板綁定的選項。這是一個比你需要的更通用的示例(你可以在valueAccessor()對象上設置名稱):http://jsfiddle.net/rniemeyer/7rcFD/ – 2012-02-14 14:52:10