Backbone视图未将数据正确传递到下划线模板

Question

我在尝试让我的模板正确显示视图/模型中的数据时遇到了一段可怕的时间。我可以获取整个对象，但不能访问该对象中包含的任何数据。我只得到一个响应，说对象是未定义的。

App.js

$(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();
}); 

Model.js

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;
    }

});

View.js

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;
    }   
});

Page.jade

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() %>
                |       &nbsp;<%= event.venue.name %></p>
                |       <button data-event-id='<%= event.id %>'>See More</button>
                |       <span><p><%= event.description %></p></span>
                |   </div>
                <% }); %>

我得到了整体对象，但我无法获得任何其他数据。有什么想法吗？

Answer 1

我在稍微休息了一下，然后吃了早饭(好吧，第二顿早饭)，然后我自己想出来了。

发生的事情是我在Doctor.groupProfile.fetch函数上的链接事件是错误的。在上面的例子中，它在事件结束之前调用并实例化UI，所以虽然我可以看到控制台数据，但模型当时并没有所有的数据，因此是未定义的。

它应该是：

Doctor.groupProfile.fetch().done(function() {
    $.when().then(initializeUI);
});

这样，视图将在模型有数据后被实例化。

谢谢!