带主干视图的下划线模板

Question

我在将 Backbone 集合传递给 HTML 中的 Underscore 模板时遇到问题。现在模板代码中的 是未定义的。 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。