2012-02-23 26 views
57

我有一個句柄模板,爲子元素加載部分。handlebars - 是否有可能訪問部分的父上下文?

我需要從調用模板中的父上下文訪問變量,從部分內。 ..似乎沒有解決任何內部的部分。

簡化的代碼是這樣的:

模板

{{#each items}} 
     {{> item-template}} 
    {{/each}} 

部分

value is {{value}} 

(顯然是真正的代碼更加複雜,但同樣的道理,在部分..內似乎是未定義的。)


爲了表明它是不確定的,我用了一個很簡單的輔助whatis這樣的:

Handlebars.registerHelper('whatis', function(param) { 
    console.log(param); 
}); 

,並更新了上面的代碼如下:

更新的模板

{{#each items}} 
     {{whatis ..}} <-- Console shows the correct parent context 
     {{> item-template}} 
    {{/each}} 

更新了部分

{{whatis ..}} <-- Console shows "undefined" 
    value is {{value}} 

有沒有辦法解決這個問題?我錯過了什麼嗎?

編輯:有關於這個問題的公開問題上handlebars' github project

回答

3

你可以使用一些所提出的解決方案,從鏈接的評論github上:

https://github.com/wycats/handlebars.js/issues/182#issuecomment-4206666
https://github.com/wycats/handlebars.js/issues/182#issuecomment-4445747

他們創建助手將信息傳遞給部分。

+0

很好,很明顯.. – Ben 2012-06-11 23:00:02

+0

是啊!有時我們會錯過顯而易見的其他解決方案。至少,直到他們發佈里程碑或新版本。 – rcdmk 2012-06-12 12:44:26

+0

這只是一個令人難以置信的不雅的解決方案 – Marc 2012-08-02 14:32:47

2

我創建了每個Helper函數,該函數在關鍵字parentContext下的子上下文中包含父鍵/值。

http://jsfiddle.net/AndrewHenderson/kQZpu/1/

注:下劃線是一個依賴。

Handlebars.registerHelper('eachIncludeParent', function (context, options) { 
var fn = options.fn, 
    inverse = options.inverse, 
    ret = "", 
    _context = []; 
    $.each(context, function (index, object) { 
     var _object = $.extend({}, object); 
     _context.push(_object); 
    }); 
if (_context && _context.length > 0) { 
    for (var i = 0, j = _context.length; i < j; i++) { 
     _context[i]["parentContext"] = options.hash.parent; 
     ret = ret + fn(_context[i]); 
    } 
} else { 
    ret = inverse(this); 
} 
return ret; 

});使用{{parentContext.value}}

+0

這是如何解決問題的?另外,還有一個'var option =',似乎​​以後不會使用.. – Ben 2012-12-04 02:38:36

+0

如果您使用此幫助程序,您將有權訪問包含所有值的部分模板中的一個對象,包括父項和子對象。這基本上是一個合併的上下文。 – AndrewHenderson 2012-12-06 00:58:04

+0

注意:此時孩子和父母的值將處於相同的水平。 – AndrewHenderson 2012-12-06 01:00:40

36

萬一有人碰到這個問題絆倒在部分

{{#eachIncludeParent context parent=this}} 
    {{> yourPartial}} 
{{/eachIncludeParent}} 

訪問父上下文值:

要如下使用。此功能現在在Handlebars中存在。

這樣做:

{{#each items}} 
    {{! Will pass the current item in items to your partial }} 
    {{> item-template this}} 
{{/each}} 
+0

謝謝@ james-andres。很高興知道這是終於在。我會給它一個旋轉確認.. – Ben 2013-02-04 11:06:00

+0

這應該被標記爲接受的答案。 – lbergnehr 2013-03-16 19:05:46

+14

剛剛測試過。 Doenst不幸地爲我工作。父上下文不通過。 「this」僅引用項目[:index],因此父上下文被省略。如果你傳遞「..」,這將包括父上下文,你不能訪問部分當前項目。 – Hans 2013-06-28 15:12:04

21

工作小提琴(由車把啓發AndrewHenderson拉入請求#385) http://jsfiddle.net/QV9em/4/

Handlebars.registerHelper('include', function(options) { 
    var context = {}, 
     mergeContext = function(obj) { 
      for(var k in obj)context[k]=obj[k]; 
     }; 
    mergeContext(this); 
    mergeContext(options.hash); 
    return options.fn(context); 
}); 

下面是你設置父模板:

{{#each items}} 
    {{#include parent=..}} 
     {{> item-template}} 
    {{/include}} 
{{/each}} 

而部分:

value is {{parent}} 
+3

我優選這種方法進行其清潔和靈活性相對於其他 – mynameistechno 2014-01-17 23:10:17

+1

在車把2.0,該功能[將包含](https://github.com/wycats/handlebars.js/pull/182) – Jason 2014-04-21 21:45:38

+0

這是巨大的。請記住,如果你傳遞一個partial到partial,你需要像這樣引用父項:'{{parent.parent.id}}' – 2014-08-21 15:43:58

3

將父上下文傳遞給partial的最簡單方法是執行partial內部的循環。通過這種方式默認傳遞父上下文,並且在部分內部執行循環時,{{../variable}}約定可以訪問父上下文。

example fiddle here

數據

{ 
    color: "#000" 
    items: [ 
    { title: "title one" }, 
    { title: "title two" }, 
    ] 
} 

模板

<div class="mainTemplate"> 
    Parent Color: {{color}} 
    {{> partial}} 
</div> 

的偏

<div> 
    {{#each items}} 
    <div style="color:{{../color}}"> 
     {{title}} 
    </div> 
    {{/each}} 
</div> 
0

我需要動態˚F ORM屬性這樣的事情...

{{#each model.questions}} 
     <h3>{{text}}</h3> 

      {{#each answers}} 
       {{formbuilder ../type id ../id text}} 
      {{/each}} 

    {{/each}} 

和像這樣一個幫手...

Handlebars.registerHelper('formbuilder', function(type, id, qnum, text, options) 
    { 
     var q_type = options.contexts[0][type], 
      a_id = options.contexts[1].id, 
      q_number = options.contexts[0][qnum], 
      a_text = options.contexts[1].text; 


      return new Handlebars.SafeString(
        '<input type=' + q_type + ' id=' + a_id + ' name=' + q_number + '>' + a_text + '</input><br/>' 
      ); 
    }); 

將會產生...

<input type="checkbox" id="1" name="surveyQ0">First question</input> 

我的模式是對大斑點數組和對象混合在一起。值得注意的是,使用'../'就像'../type'一樣,將父模型作爲上下文傳遞,如果沒有它,例如使用'id',它將傳入當前模型作爲上下文。

+0

這與問題沒有多大關係。 – Ben 2014-04-06 06:28:59

相關問題