Question

我有一个简单的场景，其中一个视图负责管理我的一个应用区域，称为TransactionView。它的一个子视图称为TransactionEditorView。

问题在于它的事件没有被触发！

事务编辑器显示正确（showAddEntryForm被调用），但无法隐藏（'click .hide-add-entry'永远不会被触发）。

我将发布我的代码的相关部分：

TransactionView.js

Backbone.View.extend({

    className: 'transactionView',

    initialize: function() {

        //  ...

        this.editorView = new TransactionEditorView({
            collection: this.collection, 
            parent: this
        });

        this.render();
    },

    render: function() {

        this.$el.html( template() ); // underscore template "transactions.html"

        this.$el.find('.new-transaction').after( this.editorView.render().el );
        return this;
    },

    events: {
        'click .new-transaction button': 'showAddEntryForm'
    },

    showAddEntryForm: function(event) {
        event.preventDefault();

        $(event.currentTarget).addClass('selected');
        this.editorView.show(); 
    },
    //...
}

transactions.html

<div class="controls-container">

    <div class="new-transaction">
        <button type="button" class="btn btn-lg btn-success add-positive-entry">
            <span class="visible-xs-* hidden-sm hidden-md hidden-lg">+</span>
        </button> 
        <button type="button" class="btn btn-lg btn-danger add-negative-entry">
            <span class="visible-xs-* hidden-sm hidden-md hidden-lg">-</span>
        </button>
        <div class="clearfix"></div>
    </div>

    <div class="balance">balance</div>

    <div class="filters">filters</div>

</div>

<div class="entry-list"></div>

TransactionEditor.js

Backbone.View.extend({

    className: 'add-entry-form', 
    template: template, 

    initialize: function(options) {
        this.collection = options.collection;
        this.parent = options.parent;
    },

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

    events: {
        'click .add-entry' : 'addEntry',
        'click .hide-add-entry' : 'hide'
    },

    hide: function(event) {
        console.log("Hiding editor");
        event.preventDefault();
        this.$el.slideUp();
        this.parent.$el.find('.new-transaction button').removeClass('selected');
    },

    show: function() {
        this.$el.slideDown();
    },

    addEntry: function() {

    }
    // ...
}

transactionEditor.html

<form role="form">
    form fields
</form>

我怀疑与子视图的 el 相关的内容效果不佳，但无法获得它...请帮助我。

更新

很奇怪！只需将编辑器视图创建代码( this.editorView = new TransactionEditorView(...); )从父级的初始化方法移动到父级的渲染方法......它就可以了！现在我真的很困惑......

Answer 1

你可以尝试做一个

events: {
  "all": "log"
}

log: function(e) {
  console.log e;
}

这应该记录每个被解雇的事件。我发现它在排除故障时非常有用。

未在子视图中触发的事件

1 个答案: