[英]Backbone View not properly passing data to underscore template
我在尝试让我的模板正确显示我的视图/模型中的数据时经历了可怕的时光。 我可以总体上获得该对象,但是无法访问该对象中包含的任何数据。 我只是得到一个响应,说该对象未定义。
$(document).ready(function() {
var Doctor = Doctor || {};
var startup = function() {
Doctor.groupProfile = new Group();
Doctor.groupProfile.fetch().done(
$.when().then(initializeUI)
);
};
var initializeUI = function() {
Doctor.groupView = new GroupsView({
group: Doctor.groupProfile,
el: '#template'
});
Doctor.groupView.render();
};
startup();
});
var Group = Backbone.Model.extend({
url: getMeetupData('groups'),
parse: function(resp) {
this.name = resp.results[0].name;
this.link = resp.results[0].link;
this.organizer = resp.results[0].organizer;
this.description = resp.results[0].description;
this.photo = resp.results[0].group_photo;
this.city = resp.results[0].city;
this.topics = new TopicCollection(resp.results[0].topics);
return resp;
}
});
var GroupsView = Backbone.View.extend({
el: $('template'),
initialize: function(options) {
this.group = options.group;
},
// Use an external template
template: _.template($('#groupsTemplate').html()),
render: function() {
// Fill the html with the template and the collection
//$(this.el).html(this.template({ tweets: this.collection.toJSON() }));
$(this.el).html(this.template({ group: this.group}));
return this;
}
});
extends ./layout/layout
block content
section(class="row"): div(class="column"): div(class="row")
div(class="large-12 columns")
h1 Mile Hi Who
section(class="row space"): div(class="column")
nav(class="backboneNav"): ul
li(class="large-3 columns about"): a(href="#about") About the Group
li(class="large-3 columns events"): a(href='#events') Upcoming Events
li(class="large-3 pull-3 columns"): a(href='#') Members
section(id="template")
script(type="text/template", id="groupsTemplate")
section(id="swiping", class="row"): div(class="column"): div(class="row")
div(class="large-3 large-centered columns")
|<img id="groupPhoto" src='<%= this.group.get('groupPhoto') %>' />
<% console.log(group); %>
.large-12.columns.main-content.group
h3 <%= group.name %>
p.text <%= group.description %>
section(class="row ajaxSpacing"): div(class="column"): div(class="row")
div(class="large-12 columns main-content", id="templateEvent")
script(type="text/template", id="eventsTemplate")
<% _.each(events, function(event){ %>
| <div class="events">
| <h3><%= event.name %></h3><p>
| <%= new Date(event.time).toDateString() %>
| <%= new Date(event.time).toLocaleTimeString() %>
| <%= event.venue.name %></p>
| <button data-event-id='<%= event.id %>'>See More</button>
| <span><p><%= event.description %></p></span>
| </div>
<% }); %>
我得到了总体对象,但是我再也无法获得任何其他数据。 有任何想法吗?
我稍事休息后吃了早餐(第二早餐),我自己搞定了。
发生的事情是我在Doctor.groupProfile.fetch函数上的链接事件出错。 在上述情况下,它是在事件完成之前调用并实例化UI,因此虽然我可以看到控制台数据,但该模型当时没有所有数据,因此未定义。
它应该是:
Doctor.groupProfile.fetch().done(function() {
$.when().then(initializeUI);
});
这样,视图将在模型具有数据后实例化。
谢谢!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.