Backbone.js Backbone.view listenTo集合删除事件

我正在颠簸我的头以正确地侦听集合上的移除事件以重新渲染视图

我的观点是这样的：

define(function(require) {
    var templ     = require('text!./../../templates/delete-deal-templ.html'),
        utils     = require('utils'),
        dealName  = '' ;


    return Backbone.View.extend({

        events: { 
             'click #delete-deal-btn' : 'deleteDealHandler',
        },

        template: _.template(templ),

        initialize: function() {
            this.listenTo(this.collection, 'remove', this.render);
        },

        render: function() {
            $(this.el).html(this.template({deals: this.collection}));
            ...
            return this;
        },

        deleteDealHandler: function(e) {
            e.preventDefault();
            ...
        }

    });
}); 

DealEngine.getDeleteDealView = function() {
    require(['models/deal-model','views/delete-deal-view'], function(DealModel, DeleteDealView) {
        var DealCollection = Backbone.Collection.extend({
                model: DealModel,
                url: '/alldealsofbusiness/' + DealEngine.businessID
            }),
            dealCollection = new DealCollection(),   
            promise = dealCollection.fetch();
        promise.done(function(collection) {
            new DeleteDealView({collection: collection}).render();
            DealEngine.router.navigate('deletedeal');
            window.scrollTo(0, DealEngine.top_pos);
        }); 
        promise.fail(function() {
            var utils = require('utils');
            utils.growl('Your deals', 'could not be retrieved from our cloud, please try again!', 'error');
        });
    });
};

并使用集合正确实例化，如下所示：

define(function(require) {
    var templ     = require('text!./../../templates/delete-deal-templ.html'),
        utils     = require('utils'),
        dealName  = '' ;


    return Backbone.View.extend({

        events: { 
             'click #delete-deal-btn' : 'deleteDealHandler',
        },

        template: _.template(templ),

        initialize: function() {
            this.listenTo(this.collection, 'remove', this.render);
        },

        render: function() {
            $(this.el).html(this.template({deals: this.collection}));
            ...
            return this;
        },

        deleteDealHandler: function(e) {
            e.preventDefault();
            ...
        }

    });
}); 

DealEngine.getDeleteDealView = function() {
    require(['models/deal-model','views/delete-deal-view'], function(DealModel, DeleteDealView) {
        var DealCollection = Backbone.Collection.extend({
                model: DealModel,
                url: '/alldealsofbusiness/' + DealEngine.businessID
            }),
            dealCollection = new DealCollection(),   
            promise = dealCollection.fetch();
        promise.done(function(collection) {
            new DeleteDealView({collection: collection}).render();
            DealEngine.router.navigate('deletedeal');
            window.scrollTo(0, DealEngine.top_pos);
        }); 
        promise.fail(function() {
            var utils = require('utils');
            utils.growl('Your deals', 'could not be retrieved from our cloud, please try again!', 'error');
        });
    });
};

模板：

<div id="view-header" class="align-center">
    <h2>Delete a Deal</h2>
    <h5>Please note: Deals are automatically deleted after they have expired</h5>
</div>
<div class="row">
    <div class="col-xs-1 col-md-2"></div>
    <div class="col-xs-10 col-md-8">
        <div class="form-style" >
            <div id="select-deal" class="form-group dropdown">
                <a id="deal-select" class="btn btn-outline-inverse btn-lg dropdown-toggle" data-toggle="dropdown" role="button">
                    Select Deal
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <% _.each(deals, function(deal) { %>
                        <li><a class="deal-option"><%= deal.deal.name %></a></li>
                    <% }); %>
                </ul>
            </div>
            <div class="col-xs-12 col-md-12">
                <div class="row align-center">
                    <div class="form-group">
                        <button id="delete-deal-btn" type="button" class="btn btn-outline-inverse btn-lg">Delete</button>
                    </div> 
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-1 col-md-2"></div>
</div>

删除交易
请注意：交易到期后会自动删除
选择交易



删除

this.collection对象具有正确的数据，this.render是一个函数，但是，views initialize方法抛出

未捕获类型错误：未定义不是函数

---

显然，我做错了什么，如果有人能解释一下，我将不胜感激。

我注意到的一件事是，您正在设置一个等于require调用的变量，我认为它是异步的。因此，即使未设置该变量，javascript也将继续处理。。您可能想尝试以下方法：

    var templ = require('text!./../../templates/delete-deal-templ.html', function(templ){
//process logic in here
});

也可以在模块的define调用中将变量定义为依赖项

我已经把它改写成了类似的东西，这对我来说很有用（你必须修改它以符合你正在尝试做的事情）。请注意，从模型中获取属性时，您希望使用deal.get（'name'）而不是deal.name（当然，除非该属性直接在对象上设置）

删除交易
请注意：交易到期后会自动删除
嗯，我的问题的根源是将服务器响应传递给视图，而不是集合。
这是正确的代码段：

var DealCollection = Backbone.Collection.extend({
            model: DealModel,
            url: '/alldealsofbusiness/' + DealEngine.businessID
        }),
        dealCollection = new DealCollection(),   
        promise = dealCollection.fetch();
    promise.done(function() {
        new DeleteDealView({collection: dealCollection}).render();
        DealEngine.router.navigate('deletedeal');
        window.scrollTo(0, DealEngine.top_pos);
    });

谢谢你的建议，是的，我正在模板中迭代集合。如果我注释掉这个。listenTo。。。视图已正确实例化。您是否尝试过此.collection.on（'remove'，this，this.render'）；是的，我确实这样做了，导致了相同的类型错误。好吧，更新了答案，但实际上没有相同的设置，我无法确定到底是什么导致了这个问题，但是我对代码做了一些修改，应该可以为您指出正确的方向。