backbone.jsと同じページの複数のビュー

Question

私は、クラフトシステムを作ってバックボーンをテストしています。あなたは要素（石、木、金..）を持っていて、それを使ってアイテムを作る。アイテムを作るために

は、あなたには、いくつかのレシピを持っているので、私は2つのモデルがあります：私のページの一番下にある

Recipe 
Element 

を、私は、バックボーン・ビューを使用して、私の要素のリストを作ります。それはとてもうまくいく。要素をクリックすると、それを私のバッグに追加します。

マイルートルータ：

class MyTest.Routers.App extends Backbone.Router 
    routes: 
    '': 'index' 
    'elements/:id' : 'show' 

    initialize: -> 
    @elements = new MyTest.Collections.Elements() 
    @elements.fetch() 

    index: -> 
     view = new MyTest.Views.ElementsIndex(collection: @elements) 
     $('#elements').html(view.render().el) 
     @initRecipe() 

    initRecipe: -> 
    @recipes = new MyTest.Collections.Recipes() 
    @recipes.fetch() 
    view = new MyTest.Views.RecipesIndex(collection: @recipes) 
    $('#recipes').html(view.render().el) 

    show: (id) -> 
     alert "Element #{id}" 

マイ要素ビュー：

class MyTest.Views.Element extends Backbone.View 

    template: JST['elements/element'] 

    events: 
    'element_rended': 'initImagesDatas' 
    'click img' : 'observeImageEvents' 
    'click .more': 'addToBag' 
    'click .less': 'decreaseNumber' 

    tagName : 'li' 

    render: -> 
    $(@el).html(@template(element: @model)) 
    @currentImage = $(@el).find('img') 
    @craftBox = null 
    $(@el).trigger('element_rended') 
    this 

    initImagesDatas: -> 
    @currentImage.data('alreadyAdded',false) 
    @currentImage.data('position',false) 

    observeImageEvents: (event) -> 
    event.preventDefault() 
    $(event.target).parent().next('div.element-description').fadeToggle() 

    isAdded: -> 
    if (@currentImage.data('alreadyAdded') == true) then true else false 

    addToBag: (event) -> 
    if (@isAdded()) 
     @incrementNumber() 
    else 
     @getNextCraftBox().append(@currentImage.clone()) 
     @currentImage.data('alreadyAdded',true) 
     @incrementNumber() 

    getNextCraftBox: -> 
    returnItem = $('#craft-area li').eq(0) 
    $('#craft-area li').each -> 
     if $(this).find('img').length == 0 
     returnItem = $(this) 
     return false 
    @craftBox = returnItem 
    return returnItem 

    incrementNumber: -> 
    @craftBox.find('.number').show() 
    @craftBox.find('.number').text(parseInt(@craftBox.find('.number').text())+ 1) 

    decreaseNumber: -> 
    if parseInt(@craftBox.find('.number').text()) == 1 
     @removeToBag() 
    else 
     @craftBox.find('.number').text(parseInt(@craftBox.find('.number').text())- 1) 

    removeToBag: -> 
    if (@isAdded()) 
     @craftBox.parents('ul').append('<li><div class="number">0</div></li>') 
     @craftBox.remove() 
     @currentImage.data('alreadyAdded',false) 

マイレシピビュー：

class MyTest.Views.Recipe extends Backbone.View 

    recipeSelected: null 

    template: JST['recipes/recipe'] 

    tagName : 'li' 
    className: 'recipe-li', 

    events: 
     'click': 'preFillItemsRequired' 

    preFillItemsRequired: -> 
    if $(@el).hasClass('selected') then $(@el).removeClass('selected') else $(@el).addClass('selected'); 
    recipeSelected = @model; 
    @addIngredient() 

    addIngredient: -> 
    console.log('pass') 

    render: -> 
    $(@el).html(@template(recipe: @model)) 
    this 

私の質問は、私は私の二つのビューの間で対話できる方法ですか？私の選択したレシピをCSSのセレクタを使わずに、たとえば要素のビューから取得するにはどうすればよいですか？

私のテストのようになります。私は、最も簡単な方法は、イベントを使用することだと思い

Answer 1

は下

かで考えを示し

http://lostechies.com/derickbailey/2011/08/30/dont-limit-your-backbone-apps-to-backbone-constructs/

をトリガーより簡単な使用パターン

https://github.com/derickbailey/backbone.marionette とapp.ventを見て：イベントアグリゲータ

Answer 2

はそれを行うための最も簡単なとpropert MVCの方法は、同じモデルを観察するためにそれらを持っています。

ビューは別のビューと対話できないはずですが、モデルを観察してモデル状態を変更したり、モデル状態に基づいて独自の状態を変更することができます。

var MyTest.Views.Recipe = Backbone.View.extend({ 
    initialize: function(){ 
     this.model.on('change:selected', this.render, this); 
    }, 
    events: { 
     'click': function(){ 
      this.model.set('selected', this.cid); 
     } 
    }, 
    render: function(){ 
     if(this.model.get('selected') == this.cid) { 
      this.$el.addClass('selected') 
     } 
     else { 
      this.$el.removeClass('selected') 
     } 
    } 
}); 

var model = new Backbone.Model(); 

var view1 = new MyTest.Views.Recipe({ 
    model: model, 
}); 

var view2 = new MyTest.Views.Recipe({ 
    model: model, 
}) 

// ...