Support properties other than value
timoxley opened this issue · comments
Often need to control things like display or class of an element.
For inspiration, these are the things you can change with rivets:
- text
- html
- value
- show/hide
- enabled/disabled
- checked/unchecked
- any attribute
- classes
See http://rivetsjs.com/#binders
This is possible with the reactive options object, but this is rather verbose, and not much better over just having a custom 'change' handler.
the problem with tacking that sort of thing onto what's essentially a global is you're delocalizing that logic from where it really belongs. passing it directly to reactive() is definitely more verbose in some cases but at least it's where it belongs
for ex:
ItemView.prototype.url = function(link, url){
link.href = url;
link.textContent = url.replace(/^https?:\/\//, '');
};
ItemView.prototype.created_at = function(div, date){
var fmt = '%B %d, %Y at %I:%M%P';
div.textContent = strftime(fmt, date);
};is currently what I'm doing, not great nor terrible but I guess it's a tradeoff between flexibility and being really leaky but more declarative. I'd like to facilitate more of the simple stuff but we'll always have this as a fallback.
other than the delocalization I do like their technique though actually, tried it out a bit, wish it wasn't coffeescript haha. we could easily add EJS-style pipe formatter things so you could do:
<span class="date" data-text="created_at | date '%B %d, %Y'"></span>added, we could use some tests but hey haha, fine for now. I really liked the implicit bindings we had before via [name] / [class] but both gets kinda unwieldy and annoying to guess which is which etc so I removed those for now, the explicit stuff is definitely more verbose especially when you want a class / name as well which is almost always but maybe we can rework that later
hahah +1 arguing with yourself.
Good call, going to try this out today.
haha yeah I do that a lot, pros and cons, lots of pros and cons
I don't know if it's entirely relevant, but I like the technique of firing custom functions on an adapter. E.g.
data-text="created_at | date '%B %d, %Y'"
will call the text function of an adapter with the arguments of model.created_at. in the context of the element
A typical adapter:
adapter.text = function(string) {
this.innerHTML = string
}
As for the flexibility of this technique, for example it would be possible to proxy through jQuery or similar as an adapter.
@weepy that's what it is now:
/**
* Text binding.
*/
exports.bindings.text = function(el, val){
el.textContent = val;
};not done api-wise at all but I'll document and clean things up sometime
ah sweet. do you prefer:
<div data-text="prop1" data-show="prop2" data-attribute="prop3" >
to
<div data-bind="text: prop1; show: prop2; attribute: prop3">
?
personally yeah, more of a canonical approach. prefixing with data-* is lame but meh
yeah you're right. easy to make one do the other if you really wanted to.
Is the on-change etc a Reactive thing ?
yup