8

以下代码使用Backbone.Marionette.ItemView但不能正常工作Mustache。

Backbone.Marionette.ItemView - 没有胡子

我想使用相同的代码，但使用Mustache.

这是我的代码：

Backbone.Marionette.ItemView - 带小胡子

知道为什么我的代码不起作用，为什么？

谢谢

4

2 回答 2

14

我想在这里更新一下答案，因为我只是在为此苦苦挣扎，并且我将此答案用作参考。

以下是我的发现：

这里的答案与当前版本的Mustache有点过时（这是可以理解的，因为它已经很老了）

  • Mustache.to_html现在已弃用，但仍然作为Mustache.render的简单包装器存在，以实现向后兼容。看看这个链接。

此外，我发现覆盖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.render调用 Mustache 的函数，然后将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函数才能返回 mustache。

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

于 2012-06-18T15:37:21.490 回答