javascript - 使用 backbone.js 在同一页面上显示多个 View

Question

我正在通过制作工艺系统来测试主干。你有元素(石头、木头、金..)，你可以用它来制裁剪品。

要制裁剪品，你有一些配方，所以我有两个模型:

Recipe 
Element

在我的页面底部，我使用主干 View 列出了我的元素。它工作得很好。当您点击一个元素时，我会将其添加到我的包中。

我的根路由器:

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}"

我的元素 View :

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)

我的食谱 View :

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

我的问题是如何在我的两个 View 之间进行交互？例如，如何从我的元素 View 中获取我选择的食谱(不使用 css 选择器)？

我的测试看起来像:

Answer 1

最简单和最合适的 MVC 方法是让他们观察同一个模型。

一个 View 不应该能够与另一个 View 交互，但它应该能够观察模型并改变模型状态，或者根据模型状态改变自己的状态。

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,
})

// ...