Надежда кто-то может помочь мне с,Backbone загрузить вид в представлении (как частичное)
У меня есть мнение Backbone, что в основном скелет HTML, HTML, создает интерфейс с вкладками, каждая вкладка имеет, очевидно, ссылку и область содержимого. Я хочу, чтобы каждый контент отображал индивидуальный шаблон Backbone для этой вкладки.
Так, например, на вкладке #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? Как я могу получить свою часть в браузере?