希望有人可以帮助我,
我有一个 Backbone 视图,它基本上是 HTML 的骨架,HTML 构建了一个选项卡式界面,每个选项卡显然都有一个链接和内容区域。我想要的是为每个内容呈现一个特定于该选项卡的单独的主干模板。
因此,例如在#briefs
我想要渲染的选项卡中app.projectBriefsView
。我无法想象我将如何去做这件事,这是我想要加载其他所有内容的“基本/主”视图。
app.ProjectsTabsView = Backbone.View.extend({
el: "header.project",
template: _.template($("#tpl-projects-tabs").html()),
events: {
'click .js-tab-link': 'showTab',
},
initialize: function() {
this.render();
var briefView = new app.projectBriefView;
briefView.render().el;
},
render: function() {
this.$el.append(this.template());
return this;
},
showTab: function(el) {
var tabRequired = $(el.currentTarget).attr("href");
console.log(tabRequired);
$(".tab-content.active").css("display", "none").removeClass("active");
$(".tab-content"+tabRequired).addClass("active").css("display", "block");
el.preventDefault();
}
});
模板
<script type="text/template" id="tpl-projects-tabs">
<div class="tabs">
<ul>
<li><a href="#brief" class="tab-link js-tab-link active">Brief + Notes</a></li>
<li><a href="#dates" class="tab-link js-tab-link">Dates</a></li>
<li><a href="#files" class="tab-link js-tab-link">Files</a></li>
<li><a href="#tasks" class="tab-link js-tab-link">Tasks</a></li>
<li><a href="#messages" class="tab-link js-tab-link">Messages</a></li>
<li><a href="#comments" class="tab-link js-tab-link">Comments</a></li>
</ul>
<div class="tab-content js-tab-content active" id="brief">Briefs</div>
<div class="tab-content js-tab-content" id="dates">Dates</div>
<div class="tab-content js-tab-content" id="files">Files</div>
<div class="tab-content js-tab-content" id="tasks">Tasks</div>
<div class="tab-content js-tab-content" id="messages">Messages</div>
<div class="tab-content js-tab-content" id="comments">Comments</div>
</div>
</script>
这是我要加载到该.tab-content#brief
区域的视图。
app.projectBriefView = Backbone.View.extend({
el: ".tab-content",
template: _.template($("#tpl-brief-notes").html()),
events: {
},
initialize: function() {
this.render();
},
render: function() {
this.$el.append(this.template({
p: app.project.toJSON()
}));
return this;
}
});
模板
<script type="text/template" id="tpl-brief-notes">
<div class="project_info_content">
<!-- New brief form -->
<div class="brief">
<h4>Brief</h4>
<% if (p.is_owner) { %>
<div class="js-brief-text">
<% if (p.brief == undefined || p.brief == '') { %>
<p class="add-text">No Brief, Click to add</p>
<% }
} else { %>
<div>
<% }
if (p.brief != undefined || p.brief != '') { %>
<% //p.brief %>
<?= nl2br(str_replace(' ', ' ', htmlspecialchars($project['brief']))); ?>
<% } %>
</div>
<div class="inline-edit">
<% if (p.is_owner) { %>
<form action="<?= base_url(); ?>projects/edit_brief/<%= p.id %>" method="post" accept-charset="utf-8" class="inline_edit edit_brief" novalidate="novalidate">
<p>
<textarea name="brief" class="brief_edit"><%= p.brief %></textarea>
<input type="submit" name="submit" value="Update"><a class="cancel" href="#">Cancel</a>
</p>
</form>
<% } %>
</div>
</div>
<!-- End of new brief form -->
<!-- New additional notes form -->
<div class="additional_notes">
<h4>Additional notes <span class="instructions">(Editable by other users)</span></h4>
<div class="js-notes-text">
<%
if (p.additional_info == undefined || p.additional_info == '') { %>
<p class="add-text">No Notes, Click to add</p>
<% } else { %>
<% // p.additional_info %>
<?= nl2br(str_replace(' ', ' ', htmlspecialchars($project['additional_info']))); ?>
<% } %>
</div>
<div class="inline-edit">
<form action="<?= base_url(); ?>projects/edit_additional_info/<%= p.id %>" method="post" accept-charset="utf-8" class="inline_edit edit_notes" novalidate="novalidate"> <p>
<textarea name="text_details" class="notes_edit"><%= p.additional_info %></textarea>
<input type="submit" name="submit" value="Update"> <a class="cancel" href="#">Cancel</a>
</p>
</form>
</div>
</div>
</div>
<!-- End of new additional notes form -->
</div>
</script>
我认为在app.ProjectTabsView
渲染函数中我可以做类似的事情,
var brief = new app.projectBriefView();
brief.render().el();
将输出扔给浏览器,但这似乎不起作用。有没有更好的方法来处理我称之为 Backbone 中的部分视图?我怎样才能让我的部分浏览器?