i am currently developing a library [0] that separates `what you want to do` from `what should actually happen`.
so if you have a model with some changing attributes you can write your view like this:
class View extends Backbone.View
template: (api) ->
new dynamictemplate.Template schema:'html', ->
@div class:'item', ->
@text 'default'
api.bind 'type', (type) =>
@attr 'class', type # changing the class to the new type
api.bind 'content', (content) =>
@text content
@end()
render: () ->
api = {}
_.extend(api, Backbone.Events)
@model.bind 'change:type', (model, type) ->
api.trigger 'type', type
@model.bind 'change:content', (model, content) ->
api.trigger 'content', content
tpl = @template(api)
tpl.on 'end', -> # when the rendering is done
@el = tpl.jquery # fresh build dom element by jquery
$('body').append(@el) # add it to the dom
if you want to use this you have to run render only once.
now every time the model changes the event handlers in the templates get triggered and updating it too, but what happens is that jquery sets the attribute class or the text of the div.
if you don't like to write _all_ your templates as functions i'm currently writing a tool for this library where you can use an already working html file to mask the functions, so you have to write only a subset of the resulting design but getting the full output:
now if you emit the 'content' of 'api' the text of <div class='item'> gets updated by jquery. note that you don't have to write the class attribute because the tag name is already matching, but the result will have the class='item' attribute.
i really don't know if this solves the actual problem or but i really would love to see others thinking about how to solve it (or help me getting on with this lib :P).
i allready have some ideas about writing a debug tool where every html tag that you write as function gets an special border which highlights when you change the properties like setting text and attribute or by adding new tags (look at the demo where i add tags after the templates is rendered).
ps: i hate using the data-* attribute to hook models to the dom because thats first totally ugly and second the designer doesn't want to touch it (and shouldn't! because it is _not_ part of the design).
so if you have a model with some changing attributes you can write your view like this:
if you want to use this you have to run render only once. now every time the model changes the event handlers in the templates get triggered and updating it too, but what happens is that jquery sets the attribute class or the text of the div.if you don't like to write _all_ your templates as functions i'm currently writing a tool for this library where you can use an already working html file to mask the functions, so you have to write only a subset of the resulting design but getting the full output:
what you wants as a result (which is your mask):
what you 'only' have to wite: now if you emit the 'content' of 'api' the text of <div class='item'> gets updated by jquery. note that you don't have to write the class attribute because the tag name is already matching, but the result will have the class='item' attribute.i really don't know if this solves the actual problem or but i really would love to see others thinking about how to solve it (or help me getting on with this lib :P).
i allready have some ideas about writing a debug tool where every html tag that you write as function gets an special border which highlights when you change the properties like setting text and attribute or by adding new tags (look at the demo where i add tags after the templates is rendered).
[0] https://github.com/dodo/node-dynamictemplate
ps: i hate using the data-* attribute to hook models to the dom because thats first totally ugly and second the designer doesn't want to touch it (and shouldn't! because it is _not_ part of the design).