Question

我正在制作带有标题，正文和页脚的子视图的引导模态视图。在此，模态视图是父视图，其他视图作为在主模式视图中创建的子视图。我目前遇到的问题是从子视图中获取事件，在这种情况下是页脚按钮，以触发父模态视图。当我使用下面的jQuery选择器并触发它时，无论如何调用全局Backbone触发器或this.trigger都没有，我不知道为什么。相关的触发器调用采用BaseModalFooterView的close方法。

编辑：这是JS Bin中使用jQuery触发器的一个工作示例。 http://jsbin.com/horasi/1/

＆＃13;

(function () {
    'use strict';

    Playground.Views.BaseView = Backbone.View.extend({
        initialize: function (options) {
            this.options = _.defaults(options || {}, this.options);
            this.el = this.options.el || this.el;
        },
        render: function () {
            this.$el.html(this.template(this.options));
            return this;
        }
    });
})();

(function () {
    'use strict';

    Playground.Views.BaseModalHeaderView = Playground.Views.BaseView.extend({
        el: '.modal-header',
        template: JST['app/scripts/templates/BaseModal/BaseModalHeaderView.hbs'],
        options: {
            closeButton: false,
            title: 'Header'
        }
    });

    Playground.Views.BaseModalBodyView = Playground.Views.BaseView.extend({
        el: '.modal-body',
        template: JST['app/scripts/templates/BaseModal/BaseModalBodyView.hbs']
    });

    Playground.Views.BaseModalFooterView = Playground.Views.BaseView.extend({
        el: '.modal-footer',
        template: JST['app/scripts/templates/BaseModal/BaseModalFooterView.hbs'],
        events: {
            'click #close': 'close',
            'click #save': 'save'
        },
        close: function () {
            console.log('close');

            // These work to trigger the event
            $('#base-modal-view').trigger('modal-close');
            // $('body.modal-open').trigger('modal-close');
            // $('body').trigger('modal-close');

            // These do not work
            // Backbone.trigger('modal-close');
            // this.trigger('modal-close');
        },
        save: function () {
            console.log('save');
        }
    });

    Playground.Views.BaseModalView = Playground.Views.BaseView.extend({
        el: 'body',
        id: 'base-modal-view',
        template: JST['app/scripts/templates/BaseModal/BaseModalView.hbs'],
        options: {
            views: {
                header: Playground.Views.BaseModalHeaderView,
                body: Playground.Views.BaseModalBodyView,
                footer: Playground.Views.BaseModalFooterView
            }
        },
        events: {
            'modal-close': 'hide'
        },
        initialize: function (options) {
            Playground.Views.BaseView.prototype.initialize.apply(this, options);
            if (this.model) {
                this.listenTo(this.model, 'change', this.render);
            }
        },
        render: function () {
            this.$el.append(this.template({
                id: this.id,
                model: ((this.model) ? this.model.toJSON() : {})
            }));
            this.renderSection('header')
                .renderSection('body')
                .renderSection('footer');
            return this;
        },
        renderSection: function (section) {
            var view = new this.options.views[section](this.options[section] || {});
            view.render();
            return this;
        },
        show: function () {
            this.$('#' + this.id).modal('show');
        },
        hide: function (e, data) {
            console.log('hide', data);
            this.$('#' + this.id).modal('hide');
        }
    });
})();

＆＃13;

Answer 1

您可以使用自己的事件调度程序Backbone.Events。

来自主干文档： 例如，创建一个方便的事件调度程序，可以协调应用程序不同区域之间的事件。

示例：

var ModalEventDispatcher = {};

_.extend(ModalEventDispatcher, Backbone.Events);

// Somewhere in your base BaseModalView

ModalEventDispatcher.on('model:save', yourCallbackfunction);

// Somewhere in BaseModalFooterView

ModalEventDispatcher.trigger('modal:save', options);

此示例演示了可以轻松解决您问题的基本方法。

Answer 2

我认为你不能将事件用于骨干事件，你必须使用而不是：

events: {
            'modal-close': 'hide'
        },

初始化视图

this.listenTo(view, "modal-close", this.hide);

骨干视图触发器不起作用，但jquery触发器

2 个答案: