Шаблонный механизм, который связывает атрибуты модели для просмотра?

Question

При визуализации шаблона через Backbone просмотра вы часто будете в конечном итоге с некоторыми код, который выглядит примерно так:

ShirtView = { 
    template: JST["/templates/shirt_template"], 
    el: ".shirt-element" 

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

Это все хорошо, и ваш шаблон будет сделать с атрибутами, которые хотели. Но если this.model.color изменится, оно не будет отражено в представлении. Затем вы можете использовать что-то вроде modelbinder для явного привязывания элементов в представлении к вашей модели, но это означает введение дополнительного кода в ваше представление.

Что мне интересно, если есть какие-то шаблонные механизмы, такие как Mustache или Handlebars, которые автоматически обновляют элементы, принадлежащие полям в объекте атрибутов по мере изменения модели, без необходимости указывать его в представлении?

Answer 1

Как уже отмечалось, для этого есть несколько библиотек, которые вы можете использовать для этого ... но я бы хотел предложить, что вам это не нужно. Я работаю на сайте с поддержкой Backbone с тысячами (черт, вероятно, десятками или сотнями тысяч) строк кода, и все, что мы используем, это наш собственный базовый класс.

В сущности, все, что вам нужно сделать, это:

var TemplatedView = Backbone.View.extend({ 
    render: function() { 
     this.renderTemplate(); 
    }. 
    renderTemplate: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
    } 
}); 

, то вы можете сделать любой новый вид шаблонный один только с:

var ShirtView = TemplatedView.extend({ 
    template: JST["/templates/shirt_template"], 
    el: ".shirt-element" 
}); 

или, если у вас есть некоторые пользовательские визуализации логики , вам просто нужно позвонить renderTemplate:.

var AdvancedShirtView = TemplatedView.extend({ 
    template: JST["/templates/shirt_template"], 
    el: ".shirt-element", 

    render: function() { 
     this.model.fold(); 
     this.renderTemplate(); 
     this.model.press(); 
    } 
}); 

Теперь у нас есть несколько усовершенствований за пределы, которые (например, если с omeone указывает свойство «rawTemplate» на одном из наших представлений, наш renderTemplate скомпилирует его в подходящий шаблон), но вот в чем заключается красота, сводящее ваше собственное решение к чему-то вроде этого: вы получаете именно то, что хотите.

Или вы можете использовать библиотеку :-) Но лично, для чего-то, что так просто и неотъемлемо от вашего сайта, я не понимаю, зачем вам это нужно.