dodothelast

14 ปีที่แล้วdiscuss

Level 5: XMPP

14 ปีที่แล้วdiscuss

the job of a designer is it, to let things look beautiful in different ways: in the way it looks, it feels, how to use it and so on. i wouldn't say that i'm only a software engineer, but also a software designer.

  code == ui

code has to look beautiful, it should feel good to work with, easy to use, etc.

maybe this is all about the zen of coding.

dodothelast

15 ปีที่แล้วdiscuss

i solved that by problem in my library https://github.com/dodo/node-dynamictemplate with the ui designers by masking their static html on my functions, which are only a subset of the part in the static html which you want to cover.

this way using a html mockup from a designer is like using an 3D from a 3D model artist, because you only load the data in, selecting what you want and putting a animatinon mesh / functionality into it.

tldr-part: look at my wip code → https://github.com/dodo/node-dynamictemplate/blob/a46fb6ed18...

dodothelast

15 ปีที่แล้วdiscuss

got it working so far .. but it needs some code clean up (tomorrow).

dodothelast

15 ปีที่แล้วdiscuss

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:

what you wants as a result (which is your mask):

    <div class='item'>
        default
    </div>

what you 'only' have to wite:

    new Template schema:'html', ->
        @$div ->
            api.bind 'content', (content) =>
                @text content

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).

comments