1. Inicio
  2. Pregunta y respuesta
  3. Cómo usar Backbone.Marionette.ItemView con bigote

Cómo usar Backbone.Marionette.ItemView con bigote

2012-06-18 20 views

Respuesta

8

marionetas asume el uso de plantillas UnderscoreJS por defecto. Simplemente reemplazando la configuración template para una vista no es suficiente. También debe reemplazar cómo funciona el proceso de renderizado.

En el ejemplo sencillo, sólo es necesario reemplazar la función Marionette.Renderer.render llamar bigote, y luego configurar el template de sus puntos de vista a la plantilla de cadena que desea:


Backbone.Marionette.Renderer.render = function(template, data){ 
    return Mustache.to_html(template, data); 
} 

var rowTemplate = '{{ username }}{{ fullname }}'; 

// A Grid Row 
var GridRow = Backbone.Marionette.ItemView.extend({ 
    template: rowTemplate, 
    tagName: "tr" 
});

en cuenta que su jsFiddle aún así ganó No funciona incluso cuando pone este código en su lugar, porque el GridView todavía está usando un selector jQuery/cadena como el atributo template. Tendrá que reemplazar esto con el mismo tipo de función template para devolver el bigote.

http://jsfiddle.net/derickbailey/d7qDz/

Fuente

2012-06-18 15:37:21

+1

Mirando la fuente (http://derickbailey.github.com/backbone.marionette/docs/backbone.marionette.html#section-115) me parece que debería ser suficiente para anular 'Backbone.Marionette. TemplateCache.prototype.compileTemplate': http://jsfiddle.net/me4NK/78/ ¿Cuál es la forma más adecuada? – theotheo

+2

depende de si está utilizando o no el comportamiento predeterminado de seleccionar una plantilla del DOM o de proporcionar la plantilla como una cadena sin formato. En el caso de esta pregunta, la plantilla es una cadena sin formato, por lo que anular 'Renderer.render' es más apropiado. Si la plantilla es una etiqueta DOM '

14

me gustaría actualizar la respuesta aquí un poco como yo estaba luchando con esto; y estaba usando esta respuesta como referencia.

He aquí mis conclusiones:

La respuesta en este caso es un poco fuera de fecha con la versión actual de bigote (lo cual es comprensible, ya que es bastante viejo)

  • Mustache.to_html es ahora obsoleto, pero todavía existe como un simple contenedor alrededor de Mustache.render para compat. Check out this link.

Adicionalmente, he encontrado primordial Marionette.Renderer.render, como en la respuesta aceptada anteriormente, evita por completo la capa Marionette.TemplateCache que puede no ser el comportamiento deseado.

Aquí está la fuente de la método Marionette.Renderer.render:

// Source: http://bit.ly/1f7CBRy 

render: function(template, data){ 

    if (!template) { 
    var error = new Error("Cannot render the template since it's false, null or undefined."); 
    error.name = "TemplateNotFoundError"; 
    throw error; 
    } 

    var templateFunc; 
    if (typeof template === "function"){ 
    templateFunc = template; 
    } else { 
    templateFunc = Marionette.TemplateCache.get(template); 
    } 

    return templateFunc(data); 
}

Como se puede ver que tiene acceso a la Marionette.TemplateCache.get método y la respuesta anterior no hace nada para mantener esa funcionalidad .

Ahora para llegar a mi resolver (nota: la respuesta anterior no es necesariamente malo, esto es sólo mi enfoque para mantener la capa deMarionette.TemplateCache):

Como sugiere el comentario anterior, anular compileTemplate lugar:

Marionette.TemplateCache.prototype.compileTemplate = function(rawTemplate) { 

    // Mustache.parse will not return anything useful (returns an array) 
    // The render function from Marionette.Renderer.render expects a function 
    // so instead pass a partial of Mustache.render 
    // with rawTemplate as the initial parameter. 

    // Additionally Mustache.compile no longer exists so we must use parse. 
    Mustache.parse(rawTemplate); 
    return _.partial(Mustache.render, rawTemplate); 
};

Here's a working JSFiddle as proof.

En el violín también he reemplazado Marionette.TemplateCache.loadTemplate para demostrar que solo se ha llamado una vez. El cuerpo de la función solo agrega algún resultado de depuración y luego vuelve a implementar la mayor parte de la funcionalidad original (menos el manejo de errores).

Fuente

2014-02-09 23:26:35 Aubricus

+0

Esto debe marcarse como la respuesta correcta. –

Cuestiones relacionadas

 Cuestiones relacionadas