Question

正确注册父视图和子视图中的两个事件并触发的正确方法是什么？

通过这种方法，普通人的事件事件会消灭孩子的事件。我还试图将孩子的事件作为options的一部分传递给父母，然后让父母在注册之前扩展它们，但父母的事件不再起作用。

父

// this is helpers/authorization/views/authHelper
export class AuthView extends Backbone.View {
    constructor(options?) {
        this.events = {
            'keypress #auth': 'setAuthorizationCodeKeypress',
            'click .create': 'setAuthorizationCode'
        };
        super(options);
    }
}

子

import AV = module("helpers/authorization/views/authHelper")
export class PageHelperView extends AV.AuthView {
    constructor(options?) {
        this.events = {
            'click .configHead': 'toggle'
        }
        super(options);
    }
}

我希望他们共享相同的元素，只需要调用new EHV.EncoderAPIHelperView().render();来呈现它们。

Answer 1

注意：编辑可能有更好的答案

您可以直接在对象内声明父事件，通过这样做，您不必创建新的构造函数。父视图如下所示：

export class AuthView extends Backbone.View {
    events = {
        'keypress #auth': 'setAuthorizationCodeKeypress',
        'click .create': 'setAuthorizationCode'        
    }
}

现在你可以将孩子重写为：

import AV = module("helpers/authorization/views/authHelper")
export class PageHelperView extends AV.AuthView {
    initialize(options?) {
        this.events = {
            'click .configHead': 'toggle'
        }        
    }
}

_。extend 调用向事件添加缺少的条目并替换共享密钥的条目。（见更多here）

另外，我对打字稿并不是很了解，所以这段代码可能存在一两个问题。

Answer 2

完整的工作解决方案：

家长观点：

export class AuthView extends Backbone.View {

    constructor(options?) {
        this.events = {
            'keypress #auth': 'setAuthorizationCodeKeypress',
            'click .create': 'setAuthorizationCode'
        };

        super(options);
    }
}

子视图：

import AV = module("helpers/authorization/views/authHelper")
export class PageHelperView extends AV.AuthView {

    constructor(options?) {
        super(options);
    }

    initialize(options) {
        this.events = _.extend(this.events, {
            'click .configHead': 'toggle'
        });
    }
}

扩展自定义主干视图后未触发的事件

2 个答案: