2012-06-18 10 views
8

次のコードは、Backbone.Marionette.ItemViewでは正常に動作しますが、Mustacheでは正しく動作しません。Backbone.Marionette.ItemView with Mustacheの使用方法

Backbone.Marionette.ItemView - no Mustache

私は同じコードが、Mustacheを使用してテンプレートのvaraibleのロードを使用したいと思います。ここで

は私のコードです:

Backbone.Marionette.ItemView - with Mustache

my codeは、なぜ動作しない理由を任意のアイデア?

おかげ

答えて

8

マリオネットは、デフォルトでUnderscoreJSテンプレートの使用を前提としています。ビューの構成をtemplateに置き換えるだけでは不十分です。また、レンダリング処理の仕方を置き換える必要があります。あなたのJSFiddleはまだ勝った


Backbone.Marionette.Renderer.render = function(template, data){ 
    return Mustache.to_html(template, data); 
} 

var rowTemplate = '{{ username }}{{ fullname }}'; 

// A Grid Row 
var GridRow = Backbone.Marionette.ItemView.extend({ 
    template: rowTemplate, 
    tagName: "tr" 
}); 

注:お使いの簡単な例では

は、あなただけの口ひげを呼び出すために Marionette.Renderer.render関数をオーバーライドして、あなたがしたい文字列をテンプレートにあなたの意見の templateを設定する必要があります GridViewがまだ template属性としてjQueryセレクタ/文字列を使用しているため、このコードを配置しても機能しません。あなたは口ひげを返すためにこれと同じタイプの template関数を置き換える必要があります。

http://jsfiddle.net/derickbailey/d7qDz/

+1

ソース(http://derickbailey.github.com/backbone.marionette/docs/backbone.marionette.html#section-115)を見ると、Backbone.Marionetteをオーバーライドするだけで十分だと思います。 TemplateCache.prototype.compileTemplate':http://jsfiddle.net/me4NK/78/より適切な方法は何ですか? – theotheo

+2

これは、DOMからテンプレートを選択するデフォルトの動作を使用するかどうか、またはテンプレートを生の文字列として提供するかどうかによって異なります。この質問の場合、テンプレートは生の文字列なので、 'Renderer.render'をオーバーライドする方が適切です。テンプレートがDOM '

14

私は、私はちょうどこれで苦しんでいたとして、ここで答えビットを更新したいと思います。私はこの答えを参考にしていました。

は、ここに私の調査結果です:

ここで答えは(それはかなり古いですと理解しやすい)口ひげの現在のバージョン

  • Mustache.to_htmlとビット期限が切れです現在は推奨されていませんが、単純なラッパーとして存在します。Mustache.render for backward compat。 Check out this link

はまた、私は完全に目的の動作ではないかもしれないMarionette.TemplateCache層をバイパスし、上記受け入れ答えのように、オーバーライドMarionette.Renderer.render見出さ。

ここMarionette.Renderer.renderメソッドのソースです:あなたはそれがMarionette.TemplateCache.get方法及び上記の答えはその機能を維持するために何もしないアクセス見ることができるように

// Source: http://bit.ly/1f7CBRy 

render: function(template, data){ 

    if (!template) { 
    var error = new Error("Cannot render the template since it's false, null or undefined."); 
    error.name = "TemplateNotFoundError"; 
    throw error; 
    } 

    var templateFunc; 
    if (typeof template === "function"){ 
    templateFunc = template; 
    } else { 
    templateFunc = Marionette.TemplateCache.get(template); 
    } 

    return templateFunc(data); 
} 

。今

は、私の解決に取得する(注:上記の答えが必ずしも間違っていない。これはちょうど私の Marionette.TemplateCache層を維持するためのアプローチである):

コメントは上記の提案として、compileTemplateを上書き代わりに

Marionette.TemplateCache.prototype.compileTemplate = function(rawTemplate) { 

    // Mustache.parse will not return anything useful (returns an array) 
    // The render function from Marionette.Renderer.render expects a function 
    // so instead pass a partial of Mustache.render 
    // with rawTemplate as the initial parameter. 

    // Additionally Mustache.compile no longer exists so we must use parse. 
    Mustache.parse(rawTemplate); 
    return _.partial(Mustache.render, rawTemplate); 
}; 

Here's a working JSFiddle as proof

フィヨルドでは、Marionette.TemplateCache.loadTemplateも一度だけ呼び出されることを証明するためにオーバーライドしました。関数本体にはデバッグ出力がいくつか追加され、元の機能のほとんど(エラー処理を除く)が再実装されます。

+0

これは正解とマークする必要があります。 –

関連する問題