Question

我是backbone.js的新手，我使用了Laravel和Backbone的Jeffery Way教程。我目前有一个显示的团队列表，并从数据库中附加了他们的ID。我设置了一个事件，所以当我点击一个团队时，它会向laravel发送一个get请求，并返回拥有该团队ID的所有用户。

请求效果很好，除了我试图生成用户视图。除了id之外，我无法从App.Views.Users中的集合中提取任何数据。

我这样做是否正确？

View.js

//Global App View
App.Views.App = Backbone.View.extend({
    initialize: function() {
            var allTeamsView = new App.Views.Teams({ collection: App.teams }).render();
    }
});

App.Views.Teams = Backbone.View.extend({

    tagName: 'div',

    events: {
            "click a" : "teamClicked"
    },
    teamClicked: function(e){
            e.preventDefault();
            var team_id = e.target.id;
            teamusers = new App.Models.Team({id: team_id});
            collection = new App.Collections.Teams([teamusers]);
            teamusers.fetch();
            view = new App.Views.Users({collection: collection, el: '#usersList'});
            view.render();
            return false;
    }, 
attributes: function() {
            return{
                    class: 'span2 admin teams',
                    id: 'inner-content-div'
            };
    },

    render: function(){
            this.collection.each( this.addOne, this );
            return this;
    },

    addOne: function(team){
            var teamView = new App.Views.Team({model: team});
            this.$el.append(teamView.render().el);
    }
});


// Single Team View
App.Views.Team = Backbone.View.extend({
    tagName: 'li',

    template: template('allTeamsTemplate'),

    attributes: function() {
            return{
                    id: this.model.get('id')
            };
    },

    render: function(){
            this.$el.html( this.template( this.model.toJSON() ));
            return this;
    }

});

App.Views.Users = Backbone.View.extend({
    tagName: 'ul',

    render: function(){
            this.collection.each( this.addOne, this );
            console.log(collection);
            return this;
    },

    addOne: function(user){
            var userView = new App.Views.User({model: user });
            this.$el.append(userView.render().el);
    }
});


// Single User View
App.Views.User = Backbone.View.extend({
    tagName: 'li',

    template: template('allUsersTemplate'),

    attributes: function() {
            return{
                    id: this.model.get('id')
            };
    },

    render: function(){
            this.$el.html( this.template( this.model.toJSON() ));
            return this;
    }

});

TeamController.php

public function show($id)
{
  return Team::find($id)->user;
}

Index.Blade.php

        <div class="teamContainer" id="demo"></div>
        <ul class="userContainer" id="usersList"></ul>
            <script type="text/template" id="allUsersTemplate">
                <p><%= id %></p>
            </script>
            <script type="text/template" id="allTeamsTemplate">
                <a id='<%= teamNum %>' ><%= teamName %></a>
            </script>

Answer 1

我得到了它的工作。问题在于我的活动。

View.js

    teamsUserList: function(e){
        e.preventDefault();
        var team_id = e.target.id;
        var collection = new App.Collections.TeamsUsers([], {id: team_id});
        collection.fetch().complete(function() {
            var view= new App.Views.Users({collection: collection}); 
            $('#usersList').append(view.render().el);
});

},

Backbone和Laravel - 选择团队并为该团队生成用户

1 个答案: