Mehrere anzeigen auf der gleichen Seite mit backbone.js

Ich Teste das Rückgrat, indem Sie ein Handwerk-system. Sie haben Elemente (Stein, Holz, gold..) und Sie machen Gegenstände mit.

Die Elemente, die Sie haben einige Rezept, so habe ich zwei Modelle:

Recipe 
Element

Unten auf meiner Seite, ich mache eine Liste meiner Elemente mit einem backbone-Ansicht. Es funktioniert sehr gut. Wenn Sie auf ein element, ich es in meine Tasche.

Mein root-router :

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

Meinem element anzeigen :

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)

Mein Rezept anzeigen :

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

Meine Frage ist wie kann ich die Interaktion zwischen den beiden Ansichten? Wie kann ich meine ausgewählten Rezept (ohne die Verwendung von css-Selektor) aus meinem element anzeigen zum Beispiel?

Mein test sieht so aus:

Mehrere anzeigen auf der gleichen Seite mit backbone.js

InformationsquelleAutor Sebastien | 2012-03-01

1

Ich denke, der einfachste Weg ist die Verwendung der Ereignis-Trigger

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

zeigt, der Gedanke an die unten

oder die einfachere Verwendung Muster

https://github.com/derickbailey/backbone.marionette
und Blick auf app.vent: Event Aggregator

Tatsächlich, je mehr ich es betrachte desto besser könnten Sie werden, mit, nur mit einem selectedRecepie Modell entweder aus der Rezepte-Liste oder ein separates Modell, dass beide anzeigen können
Danke, aber wenn ich-Ereignis-Trigger haben, muss ich das Feuer aus meinem Rezept-Modell, wenn ich es ausgewählt, und wie kann ich es fangen auf meinem element-Modell?

InformationsquelleAutor MarkKGreenway

Die einfachste und die Eigenschaft MVC Art und Weise zu tun, ist es, Sie zu beobachten, das gleiche Modell.

Blick sollte nicht in der Lage sein, um die Interaktion mit einer anderen Ansicht, aber es sollte in der Lage sein, zu beobachten, ein Modell und das Modell ändern Staat oder seinen eigenen Staat, basierend auf dem Modell Stand.

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

//...

Und wie kann ich es beobachten oder interagieren zwischen den Modellen?
Lassen Sie mich mein edit beantworten und klären mich
Danke, aber ich meine... Wenn ich es fangen wollen, ein Rezept, das Ereignis aus meiner element-Modell, wie kann ich das machen?
Ich bin nicht sicher, ob ich verstehe, was Sie Fragen
Zum Beispiel, wenn ich auf mein "Rezept" Modell, ich möchte eine Funktion ausführen, von meinem "element" - Modell.

InformationsquelleAutor u.k

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.