0

У меня есть простой сценарий с представлением, отвечающим за управление одной из областей моего приложения, называемой 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> 

Я подозреваю, что-то связанное с эль в подвид не работает хорошо, но не может получить, где она ... Пожалуйста, помогите мне ,

UPDATE

Очень странно! Путем простого перемещения кода создания редактора (this.editorView = new TransactionEditorView(...);) из родительского инициализируйте метод методу рендеринга родителя ... Он работает! Теперь я действительно путают ...

+0

Любой шанс увидеть урезанную (но функциональную) демо на jsfiddle.net или jsbin.com? –

+0

Не жалко, теперь это будет непросто –

+0

Вы говорите что-нибудь вроде 'parentView.el.html (...)' где-нибудь? Вы уничтожаете и воссоздаете представления по мере необходимости (хорошие) или пытаетесь повторно использовать представления, скрывая/показывая их (очень склонны к ошибкам)? –

ответ

1

Вы можете попробовать делать

events: { 
    "all": "log" 
} 

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

Это должно выйти из системы каждое событие, это уволят. Я считаю, что это очень полезно при устранении неполадок.