8

次のコードは、 を使用しても正常に動作しBackbone.Marionette.ItemViewませんMustache。

Backbone.Marionette.ItemView - 口ひげなし

同じコードを使用したいのですが、を使用してテンプレート変数をロードしMustacheます。

これが私のコードです：

Backbone.Marionette.ItemView - 口ひげあり

私のコードが機能しない理由とその理由は何ですか?

ありがとう

4

2 に答える 2

14

私はこれに苦労していたので、ここで回答を少し更新したいと思います。この回答を参照として使用していました。

ここに私の発見があります：

ここでの答えは、Mustacheの現在のバージョンでは少し古くなっています (かなり古いので理解できます)。

さらに、上記の受け入れられた回答のように、 Marionette.Renderer.renderをオーバーライドすると、 Marionette.TemplateCacheレイヤーが完全にバイパスされることがわかりましたが、これは望ましい動作ではない可能性があります。

Marionette.Renderer.renderメソッドのソースは次のとおりです。

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.getメソッドにアクセスし、上記の回答はその機能を維持するために何もしません。

今、私の解決策に取り掛かります（注：上記の答えは必ずしも間違っているわけではありません。これは、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);
};

これは、証明として機能する JSFiddleです。

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

于 2014-02-09T23:26:35.700 に答える
8

Marionette は、デフォルトで UnderscoreJS テンプレートの使用を前提としています。templateビューの構成を単に置き換えるだけでは十分ではありません。また、レンダリング プロセスの仕組みを置き換える必要もあります。

簡単な例では、関数をオーバーライドしてMarionette.Renderer.renderMustache を呼び出しtemplate、ビューの を必要な文字列テンプレートに設定するだけで済みます。


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"
});

このコードを配置しても、JSFiddle は機能しないことに注意してください。属性GridViewとして jQuery セレクター/文字列を使用しているためです。口ひげを返すtemplateには、これを同じタイプの関数に置き換える必要があります。template

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

于 2012-06-18T15:37:21.490 に答える