Attribute Binding about plates

[mwawrusch]

I don't like this one, reason is that it requires a transformation of the typical json that you receive from rest. What about the following:

data-bind, name, id for the default one

and data-bind-href, data-bind-src, etc for specific overrides. Using this approach it is possible to have flat json input and map that directly to the markup without any transform.

[appinsanity]

My apologies, I should have used gist for the code, here is a sample of attribute binding, where data-attributeName is used to map JSON to attributes, no modification to the JSON data is necessary.

https://gist.github.com/1364192

[mwawrusch]

Ha funny, seems we had almost an identical idea :).

I do think though that it needs to always start with data-bind- otherwise you would end up interfering with existing html that uses data- to drive javascript functionality.

[appinsanity]

good point, do you have a link where data- is used to drive js functionality?

[mwawrusch]

Don't have a link for that, but I have seen it in the wild and use it myself. For example I some where use it like this:

This of course has huge benefits, you are really able to decouple programming code from the visual aspects, and change functionality without actually touching code.

I think I need to blog about this some day.

[appinsanity]

Martin,

This brings up a couple of good points, in my implementation the attribute data-bind="person" is removed during the template render, consider the syntax data-text="name" when you are binding to for example an a tags anchor text, I kinda like this as it's more explicit and allows for a data-bind and a data-text to live on the same html tag, I believe I had one case where this was necessary.

I do like the cleanliness of syntax like data-href=""... the rule would be something like if it's not data-bind or data-text then the format data-attributeName is assumed. In the case of data-href="" since it's replaced with href="" during the render process you would not have collisions.

Still thinking on this one...

Mike

[jfhbrook]

+1 for a way to bind attributes. There needs to be a way to modify attributes such as href.

[mwawrusch]

appinsanity: Removing the binding information from the html would be problematic for me as I use it to write data back into models when in the browser. Flow is like this: Load model from server, create html through plates from model, on update of value (keystroke, click) update model.

I do think that anything binding related should start with data-bind, it makes it clear to plates and the casual reader that data binding is taking place. If a developer encounters a tag like data-href= intent would not be immediately clear, with data-bind-href it would be obvious though.

In any case, we need this fast. At least I do :)

[appinsanity]

Martin,

What do you think of this syntax for data-bind:

<a data-bind="href:url, text:title"></a>

<script>
var data = {
    title: "gitgub",
    url: "https://github.com/"
}
</script>

With this syntax data-bind would be removed during the render process, but you could re-inject additional data-bind or data-tweets-from-user etc...

Mike

[mwawrusch]

Hi Mike, not a friend of this, to be honest. this adds a lot of complexity and removes understandability. Knockout.js seems to have a similar problem. I had a bit of a rough day, but I am working on the reverse (binding from dom to models) thursday, which should give some more insights.

[heapwolf]

done. it works like this...

  var html = '<span></span><img id="bar" class="foo bazz" src=""/>';
  var data = { "bazz": "Hello, World" };

  var options = { "bazz": ["class", "src"] };

  var output = Plates.bind(html, data, options);