sistema de plantillas JS con Backbone.js

Estoy buscando en algunos buenos sistemas de plantillas a utilizar alongwith un framework MVC como Backbone.jssistema de plantillas JS con Backbone.js

Soy consciente de uno de estos sistemas (jQuery Plantillas). Sin embargo, el mismo ha sido descontinuado por algunas razones y, por lo tanto, estoy buscando otras buenas opciones.

Por favor, sugiera algo que sea lo suficientemente flexible desde una perspectiva de vista. (por ejemplo, una vista dinámica con botón habilitado/deshabilitado basado en cierta lógica, datos tabulares con diferentes estilos basados en cierta lógica, etc.)

Fuente

2012-03-19 testndtv

yo sugeriría http://mustache.github.com/. – Joseph

Hay una serie de plantillas que puede usar, incluida la que viene con underscore.js. Uno de mis favoritos personales es handlebars.js: http://handlebarsjs.com/ – kinakuta

Si te gusta Coffeescript, y también estás buscando un sistema de compilación para unir todo: el brunch es bueno. http://brunch.io Usos (de forma predeterminada, se puede cambiar) eco para plantillas. – Thilo

Usted tiene Underscore's template system fuera de la caja.

Con ejemplo:

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

Todos los sistemas de plantilla se pueden encontrar tienen una integración similar a este.

Por supuesto, esto es un ejemplo simplificado , normalmente la plantillase alimenta con la this.model.toJSON(), también se pueden encontrar trucos para declarar la template body into an <script> tag, y se puede utilizar Mustache syntax instead of ERB.

Fuente

2012-03-19 13:28:43 fguillen

De hecho, si está utilizando JSP o ASP en su interfaz, tendrá para hacer algo como: '_.templateSettings = {interpolate: /\{\{(.+?)\}\}/g, evaluar:/\ {% ([\ s \ S] +?)% \}/g, escape:/\ {% - ([\ s \ S] +?)% \}/g}; ' – tkone

Eso es bastante sucinto –

me gusta mucho ... Handlebars.js

Aquí hay algo de 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();

Entonces el html ...

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

Dale que un tiro!

Fuente

2012-03-19 14:56:13 jcreamer898

Thx mucho ... parece ser realmente interesante ... ya que soy nuevo en MVC basado en marcos, ¿podría explicarme brevemente cómo funciona el código exactamente ... como lo que está haciendo el nuevo HandleBarsView, etc.? – testndtv

¿A qué se refiere esta vista de dentro? – testndtv

El método .extend() está integrado en Backbone. Es la forma en que subclasifica las clases base Backbone. Así que ha definido dos clases HandlebarsView y HandlebarsModel. Luego crea una instancia de cada uno y luego le dice a la vista que haga el renderizado(). –

Estoy usando haml-coffee junto con la tubería de activos de rieles.
Elección bastante exótica, pero funciona muy bien hasta el momento.

Dentro ver que es tan simple como eso:

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

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

Fuente

2012-03-20 17:36:42

sistema de plantillas JS con Backbone.js

Respuesta

Cuestiones relacionadas