我有两个 View 对象:
define(['jquery','underscore','backbone','collections/HipHopVideos','views/Video'],function($,_,Backbone){
GenreHipHop = Backbone.View.extend ({
el:"#hipHop",
collection: new HipHopVideosCollection,
initialize: function ()
{
context = this;
//fetche data for collection
this.collection.fetch({success:function ()
{
context.render ();
}
});
},
render: function ()
{
this.collection.each(function(video)
{
videoView = new VideoView({model:video});
this.$el.append(videoView.render().el);
},this);
}//end render function
});
define(['jquery','underscore','backbone','collections/PopVideos','views/Video'], function($,_,Backbone){
GenrePop = Backbone.View.extend({
el:"#pop",
collection: new PopVideosCollection(),
initialize: function ()
{
context = this;
//fetche data for collection
this.collection.fetch({success:function ()
{
context.render ();
}
});
},//end initialize function
render: function ()
{
this.collection.each(function(video)
{
videoView = new VideoView({model:video});
this.$el.append(videoView.render().el);
},this);
}//end render function
});
这些对象应该将内容附加到此 HTML:
<div class="sect">
<a href="" class="genre_title">Pop</a>
<img class="previousBtn" src="images/nav-left.png"/>
<ul class="video_item" id="pop" page="1"></ul>
<img class="nextBtn" src="images/nav-right.png"/>
<button class="btn btn-small view-all" type="button">view all</button>
</div>
<div class="sect">
<a href="" class="genre_title">Hip Hop</a>
<img class="previousBtn" src="images/nav-left.png"/>
<ul class="video_item" id="hipHop" page="1">
<script> //loadHipHop ()</script>
</ul>
<img class="nextBtn" src="images/nav-right.png"/>
<button class="btn btn-small view-all" type="button">view all</button>
</div>
然后我调用两个 View 的实例来渲染到 dom:
pop = new GenrePop ();
hip = new GenreHipHop();
问题是 View 元素附加到带有 id #hip model 的 ul 标记,而不是像我在 View 中概述的那样。我不明白是什么原因造成的以及如何解决它
最佳答案
最好从 View 外部控制 View 到 DOM 元素的映射。您不希望 View 需要有关其周围页面结构的信息。将 View 绑定(bind)到特定元素还可以防止在站点/页面的其他区域中重用。
1 - 从 View 中删除 el 属性
2 - 将 View 绑定(bind)到 DOM 元素,如下所示:
var pop = new GenrePop({el: $('#pop')});
var hip = new GenreHipHop({el: $('#hipHop')});
参见this article有关将 View 绑定(bind)到元素的更多信息。
关于javascript - 主干 View 未渲染正确的 dom 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15253057/