如何使用 Backbone . puppet .带胡子的ItemView

34gzjxbg  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(241)

下面的代码使用Backbone.Marionette.ItemView可以正常工作,但使用Mustache则不行。
Backbone.Marionette.ItemView - no Mustache
我想使用相同的代码,但使用Mustache加载模板变量。
下面是我的代码:
Backbone.Marionette.ItemView - with Mustache
知道为什么my code不工作吗?
谢谢

y1aodyip

y1aodyip1#

我想在这里更新一下这个答案,因为我正在努力解决这个问题,我用这个答案作为参考。
以下是我的发现:
这里的答案与Mustache的当前版本有点过时(这是可以理解的,因为它很旧)

*Mustache.to_html现在已被弃用,但仍然作为Mustache.render的简单 Package 器存在,以实现向后兼容。请查看此链接。

另外,我发现覆盖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);
};

Here's a working JSFiddle as proof
在小提琴中,我还覆盖了Marionette.TemplateCache.loadTemplate,以演示它只被调用一次。函数体只添加了一些调试输出,然后重新实现了大部分原始功能(不包括错误处理)。

gpnt7bae

gpnt7bae2#

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/

相关问题