javascript - Backbone.js- 实现属于同一视图的模板片段

我正在尝试使用Backbone.JS构建一个基本的Web应用程序，并且在一开始就遇到了理解问题。

我在考虑以下HTML结构：

<script type="text/template" class="t_show">FOO</script>
static foobar
<script type="text/template" class="t_show">BAR</script>

其中static foobar始终呈现 - .t_show但仅限于路由器匹配#show时。

这是我目前的骨干代码：

var v_show = Backbone.View.extend({ el: $(".client"), template: _.template( $( '.t_show' ).html() ), render: function() { this.$el.html(this.template(this.model.attributes)); return this; },

那种已经有效，但只渲染第一个模板 - 部分（FOO）和静态代码（static code），但没有（BAR）。

Ling story short：如何在Backbone中实现属于同一视图的模板片段？

最佳答案：

1 个答案:

答案 0 :(得分：1)

jquery＆＃39; https://jsfiddle.net/vjnsd5wo/1/函数只返回第一个匹配元素的html，因此调用_.template($('.t_show').html())只会将FOO传递给模板函数。

有几种方法可以解决这个问题：

• 如果您希望FOO和BAR彼此相邻（样式放在一边），您可以将它们组合成一个模板。我猜这不适用于您的用例，或者您不会询问是否支持多个模板，但包含它是为了完整性。
• 遍历每个.t_show并将html()位加在一起，并将结果传递给_.template()。这也将显示彼此相邻的FOO和BAR。
• 将每个模板分配给自己的变量，然后分别执行和渲染模板。

最后一个选项具有最大的灵活性，因为如果您愿意，可以将生成的html放在视图的不同部分，或者您可以单独重新渲染它们，如果它们相当孤立或者是善良的，那么它们很方便沉重的渲染。这可能看起来像这样：

fooTemplate: _.template($('.foo.t_show').html()),
barTemplate: _.template($('.bar.t_show').html()),
render: function() {
    this.$el.html(this.fooTemplate(this.model.attributes));
    this.$el.append(this.barTemplate(this.model.attributes));
    return this;
},
...