Uzyskiwanie dostępu do widoku złożonego z instancji widoku elementu w podtlenku szkieletu

Question

Podstawowa sytuacja:

Mam widok złożony i widok elementów. Buduję widok złożony, przekazując mu model i kolekcję. Dane modelu są używane do zapełnienia szablonu widoku złożonego. Dane kolekcji są używane do zapełnienia widoku elementów w widoku złożonym.

Co chcę zrobić, to: w pomocniku szablonu dla widoku elementu Chcę uzyskać dostęp do danych modelu dla widoku złożonego. Mam dostęp do widoku widoku w widoku elementu. Pomyślałem, że może mi to pomóc w widoku kompozytowym, skąd mogłem dostać się do jego modelu, ale tak nie jest.

Czy jest sposób, w jaki mogę to zrobić - uzyskać dostęp do instancji widoku złożonego z jednej z instancji widoku elementu?

Dzięki

--Justin Wyllie

Answer 1

Jeśli chcesz uzyskać dostęp do danych od rodzica CompositeView, możesz wykonać wiele różnych czynności.

1. Albo przekazać te dane bezpośrednio do ItemView poprzez funkcję itemViewOptions pomocnika na CompositeView. Uwaga: Ta opcja zmieniła się na childViewOptions w Marionette 2.

2. Wywołuje metodę bezpośrednio na widoku wszystkich dzieci z CompositeView i przekazuje cokolwiek chcesz do tej metody.

3. Wywołaj zdarzenie na lub słuchaj przez ItemView.

Żadna z tych opcji nie ma bezpośredniego dostępu do widoku rodzica z elementu podrzędnego, ale powinna zrobić to, co chcesz. Poniżej znajduje się kod użycia każdego z tych podejść do przekazania modelu CompositeView do widoku dzieci.

// Pass model into ItemView on init 
var MyItemView = Backbone.Marionette.ItemView.extend({ 
    initialize : function (options) { 
    this.parentsModel = options.parentsModel; 
    } 
}); 
var MyCompView = Backbone.Marionette.CompositeView.extend({ 
    itemViewOptions : function() { return { parentsModel: this.model }; } 
    itemView : MyItemView 
}); 


// Invoke function on ItemView, passing data in 
var MyItemView = Backbone.Marionette.ItemView.extend({ 
    doSomethingWithParent : function (parentModel) { 
    // do cool thing with parentModel 
    } 
}); 
var MyCompView = Backbone.Marionette.CompositeView.extend({ 
    itemView : MyItemView, 
    onRender : function() { 
    this.children.call("doSomethingWithParent", this.model); 
    } 
}); 


// Trigger event that ItemView knows about 
var MyItemView = Backbone.Marionette.ItemView.extend({ 
    initialize : function() { 
    this.listenTo(this, "special:event", function (parentModel) { 
     // Do cool things 
    }); 
    } 
}); 
var MyCompView = Backbone.Marionette.CompositeView.extend({ 
    itemView : MyItemView, 
    onRender : function() { 
    this.children.each(_.bind(function (childView) { 
     childView.trigger("special:event", this.model); 
    }, this)); 
    } 
}); 

Answer 2

mi nie odpowiedział na pytanie. Ale zmiana podejścia działa. Zamiast próbować uzyskać dostęp do „macierzystego” View Composite z pozycji View uzyskać dostęp do elementu widoku z Composite View:

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#onbeforeitemadded-callback

mogę zmodyfikować model bieżącego widoku elementu (na podstawie wartości model widoku kompozytowego).

Answer 3

Pomyślałem, że podzielę się sugestią Andrew Hubbsa. Próbowałem wyświetlić właściwość modelu nadrzędnego wbudowaną w mój szablon elementu. Użyłem właściwości templateHelpers Marionette, aby to zrobić w połączeniu z jedną z sugestii Andrew.

Starałem się zachować przykładową Brief:

Przykład Composite szablon - Szablon myView:

<h1>Page {{name}}</h1> 
<h6>Children</h6> 
<ul></ul> 

Przykład szablonu Przedmiot - myItemTemplate:

{{name}} is child of: {{getParentName}} 

Odwiedzin:

App.module('App.View', function(View){ 

    View.MyItemView = Marionette.ItemView.extend({ 

     initialize: function(options) { 
      this.parentModel = options.parentModel; 
     }, 

     template: myItemTemplate, 

     tagName: 'li', 

     templateHelpers: function() { 

      var view = this; 

      return { 
       // Called by item template, returns parent model 'name' property. 
       getParentName: function() { 
        return view.parentModel.get('name'); 
       } 

      }; 
     } 

    }); 

    View.MyView = Marionette.CompositeView.extend({ 

     template: myViewTemplate, 

     itemView: View.MyItemView, 

     itemViewContainer: 'ul', 

     itemViewOptions: function() { 

      return { parentModel: this.model }; 

     } 

    }); 

}); 

Przykład wykonania:

// example of how implementation 
// parent model has an attribute called 'children', which is a collection of models 
var children = parent.get('children'); 

var view = new App.View.MyView({ model: parent, collection: children }); 

App.mainRegion.show(view);