Question

嗨，我很难理解如何做到以下几点。

我有一个我渲染的骨干视图，然后我想在该视图中为dom元素添加另一个视图。

这是我的代码：

define([
  'jquery',
  'underscore',
  'backbone',
  'views/common/parent',
  'text!templates/currentAccounts.html',
  'text!templates/guidesTools.html'
], function($, _, Backbone, ParentView, mainTemplate, subTemplate){

var accountsView = ParentView.extend({
    render : function() {
        this.$el.html(mainTemplate);
    }
});

return new accountsView;

}）;

我现在需要将子模板（guidesTolls.html）附加到主模板中的dom元素。最好的方法是什么？

Answer 1

请尝试从http://backbonejs.org/#examples-todos

了解示例

在这部分中有两个模型和三个视图

型号/收集
- Todo Model
- TodoList Collection
观
- Todo View
- TodoList查看
- App View

App View基于TodoList视图渲染视图，该视图呈现每个Todo对象的Todo View。

你的情况比这简单。具体来说，你可以做这样的事情来获得带有子视图的视图

<div id="main">
</div>
<script type="text/template" id="main-template">
    <h3>main view</h3>
    <ul>
      <li><%= account.id %></li>
      <li><%= account.name %></li>
    <ul>
    <div id="guide-tools"></div>
</script>

使用Javascript：

var accountsView = ParentView.extend({
    el: $("#main")
    render : function() {
        var template = _.template($("#main-template").html());
        var guideTemplate = "Guide Tool Text";
        this.$el.html(template(this.model.toJSON()));
        this.$("#guide-tools").html(guideTemplate);  // will insert the guide page to the #main div
    }
})

注意：我不知道如何从html文件中获取文本，特别是如果您使用的是服务器端脚本。

在Backbone的View中渲染子视图

1 个答案: