Question

我正在通过制作工艺系统来测试骨干。你有元素（石头，木头，金子......），你用它制作物品。

要制作物品，你有一些配方，所以我有两个型号：

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选择器）？

我的测试看起来像：

My interface

Answer 1

最简单和最有效的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,
})

// ...

Answer 2

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

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

显示了底层的想法

或更简单的使用模式

https://github.com/derickbailey/backbone.marionette 并查看app.vent：Event Aggregator

与backbone.js在同一页面上的多个视图

2 个答案: