backbone.js - software - Cómo acceder a una vista compuesta desde una instancia de vista de elemento en Backbone Marionette

backbone router extend

Question

La situación básica es esta:

Tengo una Vista compuesta y una Vista de elemento. Construyo la vista Compuesta pasando un modelo y una colección. Los datos del modelo se utilizan para rellenar la plantilla para la vista compuesta. Los datos de la colección se utilizan para llenar la Vista de elementos para la Vista compuesta.

Lo que quiero hacer es esto: en un asistente de plantilla para la vista de Artículo, quiero acceder a los datos del modelo para la Vista compuesta. He llegado al punto de vista de la vista de elementos. Pensé que eso podría darme una idea de la Vista compuesta, desde donde podría llegar a su modelo, pero no es así.

¿Hay alguna forma de que pueda hacer esto: acceder a la instancia de vista compuesta desde una de sus instancias de vista de elemento?

Gracias

--Justin Wyllie

Answer 1

No respondí la pregunta. Pero cambiar el enfoque funciona. En lugar de intentar acceder a la Vista compuesta "principal" desde la Vista de elementos, accedo a la Vista de elementos desde la Vista compuesta:

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

Puedo modificar el modelo de la vista actual del artículo (basado en un valor en el modelo de la Vista compuesta).

Answer 2

Pensé en compartir cómo la sugerencia de Andrew Hubbs me ayudó. Estaba intentando mostrar una propiedad de modelo padre en línea con mi plantilla de elemento. Usé la propiedad templateHelpers de Marionette para hacer esto en combinación con una de las sugerencias de Andrew.

Traté de mantener el ejemplo breve:

Ejemplo de plantilla compuesta - myView Template:

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

Ejemplo de plantilla de elemento - myItemTemplate:

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

Puntos de vista:

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

        }

    });

});

Un ejemplo de cómo esto se implementaría:

// 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 );

Answer 3

Si desea acceder a los datos del CompositeView principal, puede hacer una serie de cosas diferentes.

1. Pase los datos directamente a ItemView través de la función auxiliar itemViewOptions en CompositeView . Nota: Esta opción ha cambiado a childViewOptions en Marionette 2.

2. Invoque un método directamente en todas las vistas secundarias de CompositeView y pase lo que desee a ese método.

3. Activar un evento o escuchado por ItemView .

Ninguna de estas opciones tiene acceso directo a la vista principal del niño, pero debe hacer lo que usted desee. A continuación se muestra un código sobre cómo usar cada uno de estos enfoques para pasar el modelo de CompositeView a la vista de los niños.

// 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));
  }
});