2016-03-25 8 views
0

バックボーンコレクションビューをレンダリングする際にいくつかの問題があります。私のHTMLでバックボーン:レンダリングコレクションビュー - タグ名は無視されます

、私はID member-listとdiv要素を持っている:

<div id="member-list"></div> 

実際のリストを保持するために使用されるビューはMemberListViewと呼ばれている:

var Backbone = require('backbone'); 
var $ = require('jquery'); 
var MemberListItemView = require('MemberListItemView'); 

return Backbone.View.extend({ 
    tagName: 'ul', 

    render: function() { 
    this.collection.each(function (item) { 
     this.$el.append(new MemberListItemView({ model: item }).render().el); 
    }.bind(this)); 

    return this; 
    }, 
}); 

それぞれ、1つのアイテムをMemberListItemViewで表されます。

var Backbone = require('backbone'); 
var $ = require('jquery'); 
var _ = require('underscore'); 

return Backbone.View.extend({ 
    template: '_.template($("#memberItemTemplate").html())', 

    tagName: 'li', 

    render: function() { 
    this.$el.html(this.template(this.model.toJSON())); 

    return this; 
    }, 
}); 

親ビューからは、

this.list = new MemberListView({ collection: this.collection }); 
this.list.setElement('#member-list').render(); 

は残念ながら、HTML出力が正しくない、ulが欠落している:このようなMemberListView nvoke - すでに存在するため、おそらく

<div id="member-list"> 
    <li>Member</li> 
    <li>Member</li> 
    <li>Member</li> 
</div> 

を私はこの問題はsetElementを使用してとは何かを持っていると思いますelなどです。

にはどうすればtagNameを無視しないように出力され、力MemberListView<ul>を追加することができますか?

答えて

1
return Backbone.View.extend({ 
    template: '_.template($("#memberItemTemplate").html())', 

あなたのtempalteは文字列であり、tempalteではないようです。私が何をしたいことは、このようなものである推測しています:

return Backbone.View.extend({ 
    template: _.template($("#memberItemTemplate").html()), 

代わり

this.list = new MemberListView({ collection: this.collection }); 
this.list.setElement('#member-list').render() 

の試みる

this.list = new MemberListView({ collection: this.collection, el: $('#member-list') }); 
this.list.render(); 
関連する問題