2014-09-11 60 views
2

這裏是我的行爲:MarionetteJS和不理解行爲

define(['marionette'], function (Marionette){ 
    'use strict'; 

    var Filter = Marionette.Behavior.extend({ 
     events: { 
      'keyup @ui.filter': 'onFilter' 
     }, 

     defaults: { 
      field: "name" 
     }, 

     onFilter: function() { 
      console.log(this.options.field); 
      console.log(this.view); 
     } 
    }); 

    return Filter; 
}); 

這裏是我如何使用它

define(['underscore', 'jquery', 'marionette', 'text!components/slide-out-menu/template.html', 'eventer', 
     'behaviors/behavior.filter'], 
function (_, $, Marionette, templateHTML, eventer, Filter) { 
    'use strict'; 

    var SlideOutMenuView = Marionette.LayoutView.extend({ 
     tagName: 'section', 
     className: 'menu open', 
     template: _.template(templateHTML), 

     ui: { 
      next: '.next', 
      prev: '.prev', 
      cancel: '.cancel', 
      submit: '.submit', 
      title: 'header h1', 
      filter: 'header input', 
      toggleGroups: '.toggle-groups', 
      toggleSegments: '.toggle-segments' 
     }, 

     events: { 
      'click @ui.cancel': 'menuClose', 
      'click @ui.submit': 'updateSelection', 
      'click @ui.next': 'onNextClick', 
      'click @ui.prev': 'onPrevClick', 
      'click @ui.toggleGroups, @ui.toggleSegments': 'onToggleClick' 
     }, 

     behaviors: { 
      Filter: { 
       behaviorClass: Filter 
      } 
     }, 

但我需要的行爲,以超越爲ItemView這樣的:

var GroupItemView = Marionette.ItemView.extend({ 
    tagName: 'article', 

    template: _.template(templateHTML), 

    ui: { 
     input: 'input' 
    }, 

    events: { 
     'click': 'onSelect' 
    }, 

    behaviors: { 
     Filter: { 
      behaviorClass: Filter, 
      field: "group_name" 
     } 
    }, 

行爲從LayoutView內部明顯觸發但I ca沒有得到它在ItemView內部發火... @ui.filter屬性是LayoutView的一部分,所以也許這是我的問題,但是如何超越到ItemView?

回答

0

不完全確定我在追隨,但是您可以嘗試從ItemView中冒泡一個事件並在佈局中偵聽它?

所以在ItemView控件,你可以說:

triggers: 
    "click .elThatYouCareAbout": "el:clicked" 
您的收藏/複合視圖

那麼你可以說(你也可以聽聽這在您的控制器如果你初始化它那裏):

initialize: -> 
     @on "childview:el:clicked", (child, args) => 
     @trigger "some:other:event", args 

然後在您的佈局中,您可以對該事件採取行動。你甚至可能根本不需要這種行爲,也不需要我去思考它 - 我從來沒有將這種模型的pub/sub/messaging應用到應用程序的不同部分。

(原諒coffeescript):)