我有一些旧版 HTML,它通过 AJAX 返回项目列表。
var xhr = $.get('/example');
xhr.done(function(data){
$('#container').html(data);
});
我重构了该 HTML 的一部分以使用 Backbone View。我想立即内联渲染 View ,而不指定选择器。以下是 HTML 的简化示例:
<ul>
<li>
Some stuff here
<script>
var view = new MyView();
// render the view and put the html right here!
</script>
</li>
</ul>
我尝试了类似 document.write(view.render().el)
的方法,但无法正常工作。
如何内联渲染主干 View ?
更新:这个问题的原因是会有多个列表项,并且这个 View 将被渲染多次。我认为没有必要为每个列表项创建唯一的 ID,只是为了将 Backbone View 附加到每个列表项。我想也许有一种简单的方法可以在脚本标签中说“这个父级”。也许这才是我真正的问题......
最佳答案
render
函数应将 View 渲染到其 $el
属性中。
渲染完成后,您可以访问$el
来获取渲染后的 View 。您可以像这样“内联”编写它:
<ul>
<li>
Some stuff here
<script>
var view = MyView();
view.render();
document.write(view.$el.html());
</script>
</li>
</ul>
一个完整的例子:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script type="text/template" id="search_template">
<label>Search</label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
<script type="text/javascript">
SearchView = Backbone.View.extend({
render: function() {
var template = _.template($("#search_template").html(), {});
this.$el.html(template);
}
});
var search_view = new SearchView();
search_view.render();
document.write(search_view.$el.html());
</script>
请注意,这不是 Backbone 的使用方式。此内联不适用于事件。
正确的方法是将适当的元素传递给 View 的构造函数。或者,您可以将该元素附加为另一个元素的子元素以保留完整功能:
document.getElementById('foo').appendChild(myView.$el);
关于javascript - 如何内联渲染 Backbone View ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27112969/