带骨干视图的下划线模板

Question

我在将Backbone集合传递到HTML中的Underscore模板时遇到麻烦。 现在在模板代码<％= teamCollection％>中未定义。 teamCollection是我想从Backbone视图传递到模板的Backbone集合。

这是模板代码：

<script id="user-home-main-table-template" type="text/template">

    <table class="table">
    <thead>
    <tr>
        <th>#</th>
        <th>Team Name</th>
        <th>Club</th>
        <th>Sport</th>
        <th>Delete?</th>
    </tr>
    </thead>
    <tbody>

    <%
    <!--console.log(<%=teamCollection%>);
    var teams = <%=teamCollection%>;
    console.log(teams);-->

    for(var i=0; i
    <teams.length
            ; i++) { %>
       <!-- <tr onclick=window.document.location='/users/<%=user._id%>/teams/<%= teams[i]._id%>/teamDashboard'>-->
        <tr>
            <td>
                <%=i+1%>
            </td>
            <td >
                <a class="font-big" href='/users/<%=user._id%>/teams/<%= teams[i]._id%>/teamDashboard'>
                    <%= teams[i].teamName %>
                </a>
            </td>
            <td>
                <a class="font-big" href='/users/<%=user._id%>/teams/<%= teams[i]._id%>/teamDashboard'>
                    <%= teams[i].club %>
                </a>
            </td>
            <td>
                <a class="font-big" href='/users/<%=user._id%>/teams/<%= teams[i]._id%>/teamDashboard'>
                    <%= teams[i].sport %>
                </a>
            </td>
            <td>
                <a class="btn btn-warning" onclick=window.userHomeMainTableView.deleteTeam('<%=teams[i]._id%>');>delete</a>
            </td>
        </tr>
        <% } %>
    </tbody>
</table>
</script>

这是骨干网代码：

var Team = Backbone.Model.extend({
    idAttribute: "_id",
    urlRoot: '/api/teams'
});

var TeamCollection = Backbone.Collection.extend({
    model: Team 
});

var teamCollection = new TeamCollection([]);

var UserHomeMainTableView = Backbone.View.extend({
    tagName: "div",
    collection: teamCollection,
    events: {},
    initialize: function () {
       this.render();
    },
    render: function() {
        //this.template = _.template($('#tmpl').html());
        var userHomeMainTableTemplate = document.getElementById('user-home-main-table-template').innerHTML;
        var template = _.template(userHomeMainTableTemplate);
        //this.$el.html(_.template(userHomeMainTableTemplate)());
        this.$el.html(template({teamCollection:teamCollection}));
        console.log('userHomeMainTableTemplate rendered');
        return this;
    },
    addTeam: function (teamData) {
        console.log('adding team:', team_id);
    }
});

这是一个与此问题相对应的JSFiddle，我显然也无法正常工作： http : //jsfiddle.net/the1mills/26dkh5wa/

Answer 1

teamCollection因为在模板中未定义teamCollection在JavaScript代码未定义。 我在您的代码中找不到声明或teamCollection 。