Javascript 使用backbone.js在同一页面上查看多个视图

我正在制作一个工艺系统来测试主干。你有石头、木头、金子等元素。。你可以用它制作物品

要制作物品，您需要一些配方，因此我有两种型号：

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)

我的问题是如何在我的两种观点之间进行互动？例如，在不使用元素视图中的css选择器的情况下，如何获取所选配方

我的测试看起来像：

---

我认为最简单的方法是使用事件触发器

显示了底部的想法

或者更简单的使用模式

---

看看app.vent:Event Aggregator，我认为最简单的方法是使用事件触发器

显示了底部的想法

或者更简单的使用模式

---

看看app.vent:Event Aggregator，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,
})

// ...

---

最简单、最合适的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,
})

// ...

---

事实上，我看得越多，你可能就越喜欢从recipies列表中选择一个selectedRecepie模型或一个单独的模型，两者都可以查看谢谢，但是如果我使用事件触发器，我必须在选择它时从我的配方模型中触发它，我如何在我的元素模型中捕捉它呢，我看得越多，你可能就越喜欢从recipies列表中选择一个Recipie模型或一个单独的模型，两者都可以查看谢谢，但是如果我使用事件触发器，我必须在选择它时从我的recipe模型中触发它，我怎样才能在我的元素模型上捕捉到它？我怎样才能在模型之间观察或交互？谢谢，但我的意思是。。。如果我想从我的元素模型中捕捉一个配方事件，我该怎么做？我不确定我是否理解你的要求。例如，当我点击我的配方模型时，我想执行元素模型的一个函数。我猜你的意思是点击视图。当您单击某个视图时，其内部状态可能会发生更改，结果可能是：1。触发事件并让应用程序处理它。2.更改共享模型的属性并让其他视图观察该模型。我如何观察模型或在模型之间进行交互？谢谢，但我的意思是。。。如果我想从我的元素模型中捕捉一个配方事件，我该怎么做？我不确定我是否理解你的要求。例如，当我点击我的配方模型时，我想执行元素模型的一个函数。我猜你的意思是点击视图。当您单击某个视图时，其内部状态可能会发生更改，结果可能是：1。触发事件并让应用程序处理它。2.更改共享模型的特性，并让其他视图观察该模型。