sistema di template JS con Backbone.js

sto guardando alcuni buoni sistemi di template da utilizzare alongwith un framework MVC come Backbone.jssistema di template JS con Backbone.js

Sono a conoscenza di un tale sistema (jQuery Templating). Tuttavia, lo stesso è stato interrotto per alcune ragioni e quindi sto osservando alcune altre buone opzioni.

Si prega di suggerire qualcosa che è abbastanza flessibile dal punto di vista della vista. (ad esempio, una vista dinamica con pulsante abilitato/disabilitato basato su alcuni dati logici, tabulari con stili diversi basati su alcune logiche, ecc.)

fonte

2012-03-19 testndtv

vorrei suggerire http://mustache.github.com/. – Joseph

Esistono numerosi modelli che è possibile utilizzare, incluso quello fornito con underscore.js. Uno dei miei preferiti è handlebars.js: http://handlebarsjs.com/ – kinakuta

Se ti piace Coffeescript, e stai anche cercando un sistema di compilazione per riunirli tutti insieme: il brunch è bello. http://brunch.io Usi (di default, può essere modificato) eco per il template. – Thilo

Hai appena terminato la casella Underscore's template system.

Con esempio:

# code simplified and not tested 
var myView = Backbone.View.extend({ 
    template: _.template("<h1><%= title %></h1>"), 

    render: function(){ 
    this.$el.html(this.template({ title : "The Title" })); 
    return this; 
    } 
});

Tutti i sistemi di template si possono trovare hanno un'integrazione simile a questo.

Naturalmente questo è un esempio semplificato , normalmente il modelloè alimentato con il this.model.toJSON(), anche si possono trovare trucchi per dichiarare il template body into an <script> tag, ed è possibile utilizzare Mustache syntax instead of ERB.

fonte

2012-03-19 13:28:43 fguillen

Infatti se stai utilizzando JSP o ASP sul tuo front-end, avrai per fare qualcosa del tipo: '_.templateSettings = {interpolate: /\{\{(.+?)\}\}/g, valuta:/\ {% ([\ s \ S] +?)% \}/g, escape:/\ {% - ([\ s \ S] +?)% \}/g}; ' – tkone

Questo è abbastanza sintetico –

mi piace molto ... Handlebars.js

Ecco alcuni JavaScript ...

var HandlebarsView = Backbone.View.extend({ 
    el: '#result' 
    initialize: function(){ 
     this.template = Handlebars.compile($('#template').html()); 
    }, 
    render: function(){ 
     var html = this.template(this.model.toJSON()); 
     this.$el.html(html); 
    } 
}); 

var HandlebarsModel = Backbone.Model.extend({}); 

var model = new HandlebarsModel({ 
    name: 'Joe Schmo', 
    birthday: '1-1-1970', 
    favoriteColor: 'blue' 
}); 

var view = new HandlebarsView({ 
    model: model 
}); 
view.render();

Poi l'html ...

<div id="result"> 
</div> 
<script id="template" type="text/html"> 
    <div>Name:{{name}} Birthday: {{birthday}} Favorite Color: {{favoriteColor}} </div> 
</script>

dare quel un colpo!

fonte

2012-03-19 14:56:13 jcreamer898

Thx molto ... sembra essere davvero interessante ... sono nuovo di MVC framework basati, potrei spiegarmi brevemente come funziona esattamente il codice ... come quello che sta facendo il nuovo HandleBarsView, etc ... – testndtv

Anche a cosa si riferisce la presente Vista interna? – testndtv

Il metodo .extend() è incorporato in Backbone. È come si sottoclassi le classi base Backbone. Quindi ha definito due classi: HandlebarsView e HandlebarsModel. Quindi crea un'istanza di ciascuno, quindi indica la vista a render() stesso. –

Sto usando haml-coffee insieme alla pipeline di asset di rotaie.
Scelta piuttosto esotica, ma funziona benissimo finora.

Vista interna è semplice come sembra:

var MyView = Backbone.View.extend({ 
    template: JST['path/to/mytemplate'] 

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

fonte

2012-03-20 17:36:42

sistema di template JS con Backbone.js

risposta

Problemi correlati