Come memorizzare correttamente un modello javascript, in modo che non venga istanziato più volte

Question

Sto usando Backbone e quindi Underscore per il rendering dei miei modelli. I miei modelli vengono renderizzati nei tag <script> e quindi uso jQuery per prendere il loro html. La mia opinione spina dorsale si presenta così:

App.ItemView = Backbone.View.extend({ 
    className:'well', 

    events: { 
     'click .continue': 'handleContinueClick', 
    }, 

    initialize: function() { 
     this.template = _.template($("#ItemTemplate").html()) 
     this.render() 
    }, 

    render: function() { 
     $(this.el).html(this.template({model:this.model})) 
    }, 

    handleContinueClick: function(e) { 
     alert('Clicked!') 
    } 
}) 

mia edizione è vorrei solo andare e afferrare l'html una volta e solo una volta per questo particolare tipo di vista in modo che se ho un sacco di oggetti non è così vai alla ricerca del codice html per questo modello ogni volta.

In pratica, come si memorizza correttamente la variabile di modello al livello dell'oggetto ItemView (non l'istanza della vista) tenendo presente che il recupero dell'HTML deve attendere fino al termine del caricamento della pagina (in modo da garantire il modello html è disponibile).

Answer 1

È possibile costruire un oggetto molto semplice che memorizza nella cache i modelli per voi:

TemplateCache = { 
    get: function(selector){ 
    if (!this.templates){ this.templates = {}; } 

    var template = this.templates[selector]; 
    if (!template){ 
     var tmpl = $(selector).html(); 
     template = _.template(tmpl); 
     this.templates[selector] = template; 
    } 

    return template; 
    } 
} 

Poi a suo avviso, è possibile chiamare TemplateCache.get e passare il vostro selettore modello.

Backbone.View.extend({ 
    template: "#ItemTemplate", 

    render: function(){ 
    var template = TemplateCache.get(this.template); 
    var html = template(this.model.toJSON()); 
    this.$el.html(html); 
    } 
}); 

La prima volta che si chiama TemplateCache.get per un dato selettore, caricherà dal DOM. Qualsiasi chiamata successiva per ottenere il modello lo caricherà dalla versione memorizzata nella cache e impedirà la chiamata di accesso DOM aggiuntiva.

FWIW: Ho una versione molto più robusto dell'oggetto TemplateCache nel mio quadro Backbone.Marionette: https://github.com/derickbailey/backbone.marionette

Answer 2

Si potrebbe impazzire con prototype.template a mano e compilare il modello la prima volta che si crea un'istanza della vostra vista. Qualcosa di simile a questo:

initialize: function() { 
    if(!this.constructor.prototype.template) 
     this.constructor.prototype.template = _.template($("#ItemTemplate").html()); 
    this.render(); 
} 

Demo: http://jsfiddle.net/ambiguous/e6y3F/

Il trucco è quello di mettere le mani sulla destra prototype.

Answer 3

Molti esempi di Backbone che ho visto lo fanno in questo modo. Questo attraverserà il DOM solo una volta per analizzare il modello quando la pagina finisce di caricarlo e utilizzarlo per ogni new ItemView().

App.ItemView = Backbone.View.extend({ 
    template: _.template($("#ItemTemplate").html()), 

    className:'well', 

    events: { 
     'click .continue': 'handleContinueClick', 
    }, 

    ... 
}); 

http://backbonejs.org/docs/todos.html#section-21

Answer 4

è possibile memorizzare il modello compilato in una chiusura in modo che solo le istanze di ItemView possano accedervi:

(function() { 

    var template; 

    App.ItemView = Backbone.View.extend({ 

     className:'well', 

     events: { 
      'click .continue': 'handleContinueClick' 
     }, 

     initialize: function() { 
      this.render(); 
     }, 

     render: function() { 
      template = template || _.template($("#ItemTemplate").html()); 
      $(this.el).html(template({model:this.model})); 
     }, 

     handleContinueClick: function(e) { 
      alert('Clicked!'); 
     } 

    }); 

})(); 

Answer 5

Un'altra soluzione utilizzando prototipo:

initialize: function(option) { 
    if (!this.template) App.ItemView.prototype.template = this.template || _.template($('ItemTemplate').html()); 
} 

Answer 6

Potresti usare codice HTML grezzo o potresti ottenere codice HTML da elemento DOM che s hould aveva reso prima di questo script

1) grezzo codice HTML:

var app = app || {}; 

app.TreeView = Backbone.View.extend({ 
    tagName: 'ul', 
    id: 'js-tree', 
    template: _.template('<li data-id="<%- id %>"><%- Name %></li>'), 
    initialize: function() { 
     this.render(); 
    }, 
    render: function() { 
     this.model.each(this.renderRow, this); 
     return this; 
    }, 
    renderRow: function(model) { 
     var html = template(model); 
     this.$el.append(html); 
     return this; 
    } 
}); 

2) o HTML-codice reso DOM-elemento:

var app = app || {}; 

app.TreeView = Backbone.View.extend({ 
    tagName: 'ul', 
    id: 'js-tree', 
    template: _.template($("#js-template-tree-item").html()), 
    initialize: function() { 
     this.render(); 
    }, 
    render: function() { 
     this.model.each(this.renderRow, this); 
     return this; 
    }, 
    renderRow: function(model) { 
     var html = template(model); 
     this.$el.append(html); 
     return this; 
    } 
});