1. casa
  2. Domanda e risposta
  3. Come utilizzare Backbone.Marionette.ItemView con Moustache

Come utilizzare Backbone.Marionette.ItemView con Moustache

2012-06-18 11 views

risposta

8

Marionette presuppone l'utilizzo di modelli UnderscoreJS per impostazione predefinita. La semplice sostituzione della configurazione template per una vista non è sufficiente. È inoltre necessario sostituire il modo in cui funziona il processo di rendering.

Nel vostro semplice esempio, avete solo bisogno di ignorare la funzione Marionette.Renderer.render di chiamare Baffo, e quindi impostare il template delle vostre opinioni al modello stringa che si desidera:


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

Nota che il vostro JSFiddle ancora vinto funziona anche quando si inserisce questo codice, poiché lo GridView sta ancora utilizzando un selettore/stringa jQuery come attributo template. Dovrai sostituire questo con lo stesso tipo di funzione template per restituire i baffi.

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

fonte

2012-06-18 15:37:21

+1

Guardando la fonte (http://derickbailey.github.com/backbone.marionette/docs/backbone.marionette.html#section-115) mi sembra che dovrebbe essere sufficiente per eseguire l'override di 'Backbone.Marionette. TemplateCache.prototype.compileTemplate': http://jsfiddle.net/me4NK/78/ Qual è il modo più appropriato? – theotheo

+2

dipende dal fatto che si stia utilizzando o meno il comportamento predefinito di selezionare un modello dal DOM o di fornire il modello come stringa non elaborata. Nel caso di questa domanda, il template è una stringa grezza, quindi è più appropriato sovrascrivere 'Renderer.render'. Se il modello è un tag '

14

vorrei aggiornare la risposta qui un po 'come mi è stato solo alle prese con questo; e stavo usando questa risposta come riferimento.

Ecco i miei risultati:

La risposta qui è un po 'fuori moda, con la versione corrente di Baffi (che è comprensibile in quanto è piuttosto vecchio)

  • Mustache.to_html è ora deprecato, ma esiste ancora come semplice wrapper attorno a Mustache.render per retrocompatibile compat. Check out this link.

Inoltre, ho trovato prioritario Marionette.Renderer.render, come nella risposta accettata sopra, bypassa completamente la strato Marionette.TemplateCache che non può essere il comportamento desiderato.

Ecco l'origine per il metodo diMarionette.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); 
}

Come si può vedere si accede al Marionette.TemplateCache.get metodo e la risposta di cui sopra non fa nulla per mantenere tale funzionalità .

Ora per arrivare alla mia risolvere (nota: la risposta di cui sopra non è sbagliato necessariamente, questo è solo il mio approccio a mantenere la strato Marionette.TemplateCache):

Come suggeriscono i commenti sopra, ignorare compileTemplate invece:

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.

Nel violino ho anche annullato Marionette.TemplateCache.loadTemplate per dimostrare che è chiamato solo una volta. Il corpo della funzione aggiunge solo un output di debug e quindi implementa nuovamente la maggior parte delle funzionalità originali (meno la gestione degli errori).

fonte

2014-02-09 23:26:35 Aubricus

+0

Questo dovrebbe essere contrassegnato come la risposta corretta. –

Problemi correlati

 Problemi correlati