Question

我认为这应该很容易，但不知怎的，我无法弄清楚它是如何工作的。

我在骨干j中有2个模板，我想放在不同的位置，但是使用相同的Backbone.View

HTML

<script type="text/template" id="tmpl1">
<div> template 1 </div>
</script>

<script type="text/template" id="tmpl2">
<div> template 2 </div>
</script>

<div id="firstDiv"></div>

Next Template 

<div id="secondDiv"></div>

JS

TmplView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        var template = _.template( this.$el.html(), {} );
        this.container.append( template );
    },
    container:  $("#firstDiv"),
});

var template1  = new TmplView({ el: $("#tmpl1") } );
var template2  = new TmplView({ el: $("#tmpl2") } );

我的问题：如何将template2设置为容器$("#secondDiv")？

我尝试了var template2 = new TmplView({ el: $("#tmpl2"), container: $("#secondDiv") } );

请让我知道这样做的常用方法。

谢谢

Answer 1

试试这个：

TmplView = Backbone.View.extend({
initialize: function(){
    this.render();
},
render: function(){
    var template = _.template( this.template, {} );
    this.$el.append( template );
}
});

var template1  = new TmplView({ el: "#firstDiv", template : $('#tmpl1').html() } );
var template2  = new TmplView({ el: "#secondDiv", template : $('#tmpl2').html() } );

Answer 2

我通过以下解决方案解决了这个问题：

TmplView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        console.log(this.$el);
        var template = _.template( this.$el[0].html(), {} );
        this.$el[1].append( template );
    },
});

var template1  = new TmplView({ el: [$("#tmpl1"), $("#firstDiv" ) ] } );
var template2  = new TmplView({ el: [$("#tmpl2"), $("#secondDiv") ] } );

如果有人可能有更好的方法，那将是受欢迎的。

Backbone Js设置模板属性

2 个答案: