强调与骨干视图模板 [英] Underscore templates with Backbone view

问题描述

我有一个通过收集骨干为下划线的模板在我的HTML麻烦。现在在模板$ C $℃下％= teamCollection％>是不确定的。 teamCollection是骨干集我想从骨干视图到模板通过。

I am having trouble passing a Backbone collection to an Underscore template in my HTML. Right now in the template code <%=teamCollection%> is undefined. teamCollection is the Backbone collection I want to pass from the Backbone view into the template.

下面是模板code：

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

这是骨干code：

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/

here is a JSFiddle that corresponds to this question, which I obviously can't get working either: http://jsfiddle.net/the1mills/26dkh5wa/

推荐答案

teamCollection 模板是未定义的，因为 teamCollection 在JavaScript code不确定。我不能在code申报找到或 teamCollection 。

teamCollection is undefined in the template because teamCollection is undefined in the javascript code. I can't find in your code the declaration or teamCollection.

这篇关于强调与骨干视图模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！