在主干中使用带有视图的 setElement [英] using setElement with views in backbone
问题描述
遵循本教程没问题,但我决定再试一次使用主干0.9 和新的 setElement 命令.
以前,我使用了this.el.html(template)
,但是我如何使用新的 setElement 命令?
我现在的东西不起作用,应该出现的搜索字段不起作用.
来自 Backbone.js v0.9 文档:
setElement
view.setElement(element)
<块引用>
如果您想将 Backbone 视图应用于不同的 DOM 元素,请使用 setElement,它还会创建缓存的 $el 引用并将视图的委托事件从旧元素移动到新元素.
主干视图el"属性表示将实际呈现到页面的视图的 html 部分.要让视图实际呈现到页面上,您的视图需要将其添加为页面中的新元素或将其附加到页面中的现有元素.
您之前使用的代码之所以有效是因为您设置了el"构造函数中的视图附加到 ID 为search_container"的现有元素的属性:
var search_view = new SearchView({ el: $("#search_container") });
你之前使用的方法:
$(this.el).html(template);
之所以有效,是因为您将模板 html 添加到页面上的现有元素中.
当您以下列方式使用 setElement 时:
this.setElement( 模板);
您实际上是覆盖了el"的现有值;来自 ID 为search_container"的元素;到模板的 html.由于您的模板尚未添加到页面或尚不存在,您的视图将不会显示.
如果您仍想使用 setElement 并继续将其附加到 IDsearch_container",我会在您初始化视图时调用它:
初始化:function(){this.setElement(this.el);this.render();}
这样你就可以缓存$el";稍后参考,如下所示:
render: function(){var template = _.template( $("#search_template").html(), {});this.$el.html(模板);}
希望这有帮助!
Following this tutorial went okay but I decided to give it another run with backbone 0.9 and the new setElement command.
<script type="text/javascript" id = "test" >
SearchView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
var template = _.template( $("#search_template").html(), {} );
//Right here
this.setElement( template );
},
events: {
"click input[type=button]": "doSearch"
},
alert( "Search for " + $("#search_input").val() );
}
});
var search_view = new SearchView({ el: $("#search_container") });
</script>
Previously, I used this.el.html(template)
, but how do I use the new setElement command?
What I have there currently doesn't work, the search field that should appear does not.
From the Backbone.js v0.9 documentation:
setElement
view.setElement(element)
If you'd like to apply a Backbone view to a different DOM element, use setElement, which will also create the cached $el reference and move the view's delegated events from the old element to the new one.
The Backbone View "el" property represents the html portion of the view that will actually be rendered to the page. To get the view to actually render to the page your view will need to add it as a new element in the page or attach it to an existing element int the page.
The reason the code you used before worked was because you were setting the "el" property for the view in the constructor to attach to an existing element with an id of "search_container":
var search_view = new SearchView({ el: $("#search_container") });
The method you used before:
$(this.el).html(template);
worked because you were adding your template html to the existing element on the page.
When you used setElement in the following way:
this.setElement( template );
you were actually overriding your existing value for "el" from the element with id of "search_container" to the html of your template. And since your template has not been added to the page or doesn't already exist your view will not display.
If you want to still use setElement and continue attaching it to the id "search_container", I would call it when you initialize your view:
initialize: function(){
this.setElement( this.el );
this.render();
}
This way you can cached "$el" reference later, like so:
render: function(){
var template = _.template( $("#search_template").html(), {} );
this.$el.html(template);
}
Hope this helps!
这篇关于在主干中使用带有视图的 setElement的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!