Attach a custom binding?

[brian....@frontflip.com]

I would like to attach a custom binding on document ready instead of specifying it on the data-bind attribute.

So instead of this: <input type="text" data-bind="text: firstName, uniform: true" class="uniform"/>

do this: 

<input type="text" data-bind="text: firstName" class="uniform"/> 

and then $(".uniform").bindings.add({uniform:true});

Is this possible?

Thanks

Brian

[Emanuele Ziglioli]

Hi,

I've got a similar problem and was looking for a solution somewhere.
I want to dynamically attach a custom binding to a jQuery slider
handler:

var handle = slider.slider().find(".ui-slider-handle").last();

So I'm curious to try with the example you showed
$(handle).bindings.add(...);

[Emanuele Ziglioli]

mmm, I think I can call ko.applyBindings() on the handle element when
it's available, but how can I apply the data-bind property at runtime?

http://stackoverflow.com/questions/7342814/knockoutjs-ko-applybindings-to-partial-view


On Feb 21, 9:10 am, Emanuele Ziglioli <theb...@emanueleziglioli.it>
wrote:

[Emanuele Ziglioli]

Not that easy using knockout!

http://flowplayer.org/tools/forum/30/37281#post-74746

surely other people have the same problem, binding to dynamic elements

See also:

http://www.knockmeout.net/2011/04/event-delegation-in-knockoutjs.html

On Feb 21, 9:29 am, Emanuele Ziglioli <theb...@emanueleziglioli.it>
wrote:

> mmm, I think I can call ko.applyBindings() on the handle element when
> it's available, but how can I apply the data-bind property at runtime?
>

> http://stackoverflow.com/questions/7342814/knockoutjs-ko-applybinding...

[Emanuele Ziglioli]

Success!!!

I've managed to dynamically bind a custom binding to an element.
First I have an observable:

value: ko.observable()

Then I create a custom binding called 'tooltip':

ko.bindingHandlers.tooltip = {
init: function(element, valueAccessor,
allBindingsAccessor, viewModel) {
console.log("init " + element );
},

update: function(element, valueAccessor, viewModel) {
var handle = $(element);
var value = ko.utils.unwrapObservable(valueAccessor());
console.log("update " + value );
}
};

Then I attach that binding to a slider handle:

var handle = slider.slider().find(".ui-slider-
handle").first();

$(handle).attr("data-bind", "tooltip: value"); //
dynamically add the data-bind attr to that handle, binding to the
'value' model
ko.applyBindings( Sirtrack.Filters.lowerlimit, $
(firsthandle)[0] ); // tell ko to bind the two

It looks very nice and elegant to me (I'm loving ko!). It seems to
work, but I need to do some more testing.

Cheers,
Emanuele @ZiglioNZ

On Feb 21, 9:51 am, Emanuele Ziglioli <theb...@emanueleziglioli.it>
wrote:

[Emanuele Ziglioli]

Example: http://jsfiddle.net/tzD4T/48/


On Feb 21, 10:56 am, Emanuele Ziglioli <theb...@emanueleziglioli.it>
wrote:
> Success!!!

[Michael Best]

You'd use ko.applyBindingsToNode, which is exported, but isn't
mentioned in the documentation. It takes three parameters: node,
bindings, viewModel. Here's how you'd use it with your example:

$(".uniform").each(function(index, element) {
ko.applyBindingsToNode(element, {uniform:true}, null);
});

-- Michael

[brian....@frontflip.com]

Michael, thanks, that is exactly what I was looking for.

Emanuele, thanks, I can use that what you figured out in a different area. 

[Leandro de los Santos]

Hi, why do you want to do this? In general, i just do a custom binding
with a "init" function for all the DOM initialization. Also using
"with", "if", "foreach", etc. i create all the doms items withouth
need a "dinamyc dom binding" (for my point of view, it's just the
opposit, i create dom from bindings, not bindings from dom).

I'm curious about why you want to add bindings to dom items on the
fly.

Sorry for my english,
Leandro

> > Brian- Hide quoted text -
>
> - Show quoted text -

[Craig Beck]

I believe that this is what binding providers are for. (though i haven't used them)

take a look at:
http://www.knockmeout.net/2011/09/ko-13-preview-part-2-custom-binding.html

and for an example of the "unobtrusive javascript" style you're talking about:
http://joel.net/unobtrusive-data-binding-for-knockout-js