Javascript 你听过定制收藏吗？

当我这样做时，它呈现

this.collection=App.data.players这与收藏是新收藏有关，我如何收听新收藏

使用木偶，我将玩家集合传递到具有CollectionView、CompositeView和ItemView的团队集合中

团队集合视图>团队组合视图>玩家项目视图

在team compositeView中，我将
此.collection
定义为一个新的PlayerCollection，它与特定的团队ID相匹配。这将呈现完美效果，但是添加一个新的玩家，如果不刷新页面，我将无法重新呈现视图

// build a collection of players with this team ID
this.collection = new PlayersCollection(App.data.players.where({team_id: this.model.id}));

下面是大部分代码。我正在尝试添加/创建一个新播放器，并使用
listenTo
更新视图，但由于这不是定义集合的传统方式，因此我似乎必须找到绑定它的方法

Teams.js：

addPlayer: function(e) {
    e.preventDefault();

    var $newPlayer = this.$el.find('input.player_name');

    var Player = {
        player_name : $newPlayer.val(), 
        team_id     : this.model.id
    }

    App.data.players.create(Player);
    $newPlayer.val('');

},

var Marionette = require('backbone.marionette'),
    playerView = require('./player'),
    PlayersCollection = require('../../collections/players');

var teamView = Marionette.CompositeView.extend({
    events: {
        'submit #AddPlayer': 'addPlayer'
    },
    initialize: function() {
        // anytime something within this specific team changes, render
        this.listenTo(this.model, 'change', this.render);

        // build a collection of players with this team ID
        this.collection = new PlayersCollection(App.data.players.where({team_id: this.model.id}));

    },
    addPlayer: function(e) {
        e.preventDefault();

        var $newPlayer = this.$el.find('input.player_name');

        var Player = {
            player_name : $newPlayer.val(), 
            team_id     : this.model.id
        }

        App.data.players.create(Player);
        $newPlayer.val('');

    },
    itemView: playerView,
    appendHtml: function(collectionView, itemView){
        collectionView.$('.the-players').append(itemView.el);
    }
});

module.exports = CollectionView = Marionette.CollectionView.extend({
    initialize: function() {
        this.listenTo(this.collection, 'change', this.render);
    },
    itemView: teamView
});

Players.js：

addPlayer: function(e) {
    e.preventDefault();

    var $newPlayer = this.$el.find('input.player_name');

    var Player = {
        player_name : $newPlayer.val(), 
        team_id     : this.model.id
    }

    App.data.players.create(Player);
    $newPlayer.val('');

},

var Marionette = require('backbone.marionette'),
    playerView = require('./player'),
    PlayersCollection = require('../../collections/players');

var teamView = Marionette.CompositeView.extend({
    events: {
        'submit #AddPlayer': 'addPlayer'
    },
    initialize: function() {
        // anytime something within this specific team changes, render
        this.listenTo(this.model, 'change', this.render);

        // build a collection of players with this team ID
        this.collection = new PlayersCollection(App.data.players.where({team_id: this.model.id}));

    },
    addPlayer: function(e) {
        e.preventDefault();

        var $newPlayer = this.$el.find('input.player_name');

        var Player = {
            player_name : $newPlayer.val(), 
            team_id     : this.model.id
        }

        App.data.players.create(Player);
        $newPlayer.val('');

    },
    itemView: playerView,
    appendHtml: function(collectionView, itemView){
        collectionView.$('.the-players').append(itemView.el);
    }
});

module.exports = CollectionView = Marionette.CollectionView.extend({
    initialize: function() {
        this.listenTo(this.collection, 'change', this.render);
    },
    itemView: teamView
});

我找不到您将新模型添加到CompositeView集合的位置？我只找到了
App.data.players.create（Player）它不是CompositeView的集合

如果
App.data.players
是另一个主干.Collection，您需要与远程服务器保持同步，因此您正在使用
create
将其持久化到服务器，请按如下方式更改addPlayer：

var Marionette = require('backbone.marionette');

module.exports = playerView = Marionette.ItemView.extend({
    className: 'players-wrap row',
    template: require('../../../templates/teams/player.hbs'),
    events: {
        'mouseenter .player-image': 'playerOn',
        'mouseleave .player-image': 'playerOff',
        'click .player-image': 'playerClicked',
        'keydown': 'on_keypress',
        'click .one-point': 'onePoint',
        'click .two-point': 'twoPoint',
        'click .three-point': 'threePoint'
    },
    initialize:function() {
        _.bindAll(this, 'on_keypress');
        $(document).bind('keydown', this.on_keypress);
        this.listenTo(this.model, 'change', this.render);
        this.$el.attr('data-player', this.model.get('player_name').replace(/\s+/g,"_").toLowerCase());
        window.play = this.model;
    },
    playerOn:function(e) {
        this.$el.addClass('hover');
        this.findPlayer(this.model.get('player_name'), 'add');      
    },
    playerOff:function() {
        this.$el.removeClass('hover');
        this.findPlayer(this.model.get('player_name'), 'remove');
    },
    playerClicked:function() {
        this.$el.toggleClass('hover-clicked');
        this.findPlayer(this.model.get('player_name'), 'toggle'); 
    },
    findPlayer:function(name, action) {
        var player = $('.data-wrap .player-data[data-player='+ name.replace(/\s+/g,"_").toLowerCase() +']');
        if(action === 'toggle') { player.toggleClass('show-confirmed-clicked') }
        if(action === 'add')    { player.addClass('show-player-data') }
        if(action === 'remove') { player.removeClass('show-player-data') }
    },
    onePoint:function(e) {
        var addStat = parseInt(this.model.get('points')) + 1;        
        this.model.set('points', addStat);
        this.model.save();
    },
    twoPoint:function(e) {
        var addStat = parseInt(this.model.get('points')) + 2;        
        this.model.set('points', addStat);
        this.model.save();
    },
    threePoint:function(e) {
        var addStat = parseInt(this.model.get('points')) + 3;        
        this.model.set('points', addStat);
        this.model.save();
    },
    on_keypress:function(e) {
        this.keyStat(e, 49, 'points', 1);   // 1 point
        this.keyStat(e, 50, 'points', 2);   // 2 points
        this.keyStat(e, 51, 'points', 3);   // 3 points
        this.keyStat(e, 82, 'rebounds', 1); // R rebounds
        this.keyStat(e, 83, 'steals', 1); // S steals
    },
    keyStat:function(e, keyVal, stat, number) {
        if(e.keyCode == keyVal && !e.ctrlKey) { 
            if(this.$el.hasClass('hover')) {
                var addStat = parseInt(this.model.get(stat)) + number;        
                this.model.set(stat, addStat);
                this.model.save();
            }
        }
    },
    templateHelpers:function(){
        return {
            name_format: this.model.get('player_name').replace(/\s+/g, '_').toLowerCase()
        }
    }
});

CompositeView
将捕获集合的“添加”事件并附加新的itemView。
如果有帮助，请告诉我

请注意：在查看您的代码后，我发现Teams.js中的
appendHtml
可以使用
itemViewContainer
属性删除，属性值为
。玩家
将提高渲染性能。
是的，因此它是一个嵌套集合，然后，我将玩家从团队对象中取出，并将玩家集合设置为全局的，这很可能就是为什么它不会触发的原因，因为它是全局的。我需要将它传递到视图中。你说得对，我需要弄清楚如何才能在合成视图中实现这一点。谢谢你，伙计。我希望我能想到这个lol。感谢这里的优秀员工。我很高兴它有帮助。我正在阅读关于
itemViewContainer
它只是一个函数吗。如何将其替换为
appendHtml
实际上它是
CompositeView
的一个属性，如果设置它，它将指向将呈现集合模型的
ItemViews
的容器。阅读更多。