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

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

我正在尝试使用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;
},
...
本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复