title: Multiple view on same page with backbone.js
body: <p>I am testing backbone by making a craft system. You have elements (stone, wood, gold..) and you make items with it.</p>
  
  <p>To make items, you have some recipe, so I have two models: </p>
  
  <pre><code>Recipe 
  Element
  </code></pre>
  
  <p>At the bottom of my page, I make a list of my elements using a backbone view. It work very well. When you click on an element, I add it to my bag.</p>
  
  <p>My root router : </p>
  
  <pre><code>class MyTest.Routers.App extends Backbone.Router
     routes:
      '': 'index'
      'elements/:id' : 'show'
  
     initialize: -&gt;
       @elements = new MyTest.Collections.Elements()
       @elements.fetch()
  
     index: -&gt;
        view = new MyTest.Views.ElementsIndex(collection: @elements)
        $('#elements').html(view.render().el)
        @initRecipe()
  
     initRecipe: -&gt;
       @recipes = new MyTest.Collections.Recipes()
       @recipes.fetch()
       view = new MyTest.Views.RecipesIndex(collection: @recipes)
       $('#recipes').html(view.render().el)
  
     show: (id) -&gt;
        alert "Element #{id}"
  </code></pre>
  
  <p>My element view :</p>
  
  <pre><code>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: -&gt;
      $(@el).html(@template(element: @model))
      @currentImage = $(@el).find('img')
      @craftBox = null
      $(@el).trigger('element_rended')
      this
  
    initImagesDatas: -&gt;
      @currentImage.data('alreadyAdded',false)
      @currentImage.data('position',false)
  
    observeImageEvents: (event) -&gt;
      event.preventDefault()
      $(event.target).parent().next('div.element-description').fadeToggle()
  
    isAdded: -&gt;
      if (@currentImage.data('alreadyAdded') == true) then true else false
  
    addToBag: (event) -&gt;
      if (@isAdded())
        @incrementNumber()
      else
        @getNextCraftBox().append(@currentImage.clone())
        @currentImage.data('alreadyAdded',true)
        @incrementNumber()
  
    getNextCraftBox: -&gt;
      returnItem = $('#craft-area li').eq(0)
      $('#craft-area li').each -&gt;
        if $(this).find('img').length == 0
          returnItem = $(this)
          return false
      @craftBox = returnItem
      return returnItem
  
    incrementNumber: -&gt;
      @craftBox.find('.number').show()
      @craftBox.find('.number').text(parseInt(@craftBox.find('.number').text())+ 1)
  
    decreaseNumber: -&gt;
      if parseInt(@craftBox.find('.number').text()) == 1
        @removeToBag()
      else
        @craftBox.find('.number').text(parseInt(@craftBox.find('.number').text())- 1)
  
    removeToBag: -&gt;
      if (@isAdded())
        @craftBox.parents('ul').append('&lt;li&gt;&lt;div class="number"&gt;0&lt;/div&gt;&lt;/li&gt;')
        @craftBox.remove()
        @currentImage.data('alreadyAdded',false)
  </code></pre>
  
  <p>My recipe view : </p>
  
  <pre><code>class MyTest.Views.Recipe extends Backbone.View
  
    recipeSelected: null
  
    template: JST['recipes/recipe']
  
    tagName : 'li'
    className: 'recipe-li',
  
    events:
        'click': 'preFillItemsRequired'
  
    preFillItemsRequired: -&gt;
      if $(@el).hasClass('selected') then $(@el).removeClass('selected') else $(@el).addClass('selected');
      recipeSelected = @model;
      @addIngredient()
  
    addIngredient: -&gt;
      console.log('pass')
  
    render: -&gt;
      $(@el).html(@template(recipe: @model))
      this
  </code></pre>
  
  <p><strong>My question is how can I interact between my two views? How can I get my selected recipe (without using css selector) from my element's view for example?</strong></p>
  
  <p>My test looks like: </p>
  
  <p><img src="https://i.stack.imgur.com/JB2ZR.png" alt="My interface"></p>