0

trying to learn Knockoutjs.i have found a Knockoutjs custom binding related code but that is not very good.

<input data-bind="value: name" />
<hr/>
<div data-bind="fadeInText: name"></div>

ko.bindingHandlers.fadeInText = {
    update: function(element, valueAccessor) {
        $(element).hide();
        ko.bindingHandlers.text.update(element, valueAccessor);
        $(element).fadeIn(); 
    } 
};

var viewModel = {
    name: ko.observable("Bob")
};

ko.applyBindings(viewModel);

i just do not understand when people go for custom binding ?

1) if possible tell me few situation when custom binding would be option?

2) if anyone see the code then they can understand custom binding fadeInText and viewModel has no relation but still it is working. how ?

3) if there would be multiple view model then how could i specify viewmodel name with binding name at the time of binding ?

jsfiddle link of the above code http://jsfiddle.net/rniemeyer/SmkpZ/

4) how to achieve the same output without custom binding ? was it possible ?

please answer my question point wise. thanks

JotaBe
  • 38,030
  • 8
  • 98
  • 117
Mou
  • 15,673
  • 43
  • 156
  • 275
  • 2
    Here is an article that I wrote a while back that may help with some of your questions: http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html – RP Niemeyer May 15 '15 at 14:42
  • @RPNiemeyer Great article, by the way. Helped me really get started with custom bindings. – Mark C. May 15 '15 at 14:55
  • The reason for custom handlers? Purity. The view model should NOT be doing any view manipulation directly (i.e. DOM stuff). It should only manipulate the data/model, itself. The binding handler isolates any DOM manipulation (and jQuery stuff) from the viewModel which keeps it pure and much more testable. – Brett Green May 15 '15 at 15:09
  • can any one see my posted code and tell me how could i achieve the same task without custom binding.....idea would be appreciated. thanks – Mou May 15 '15 at 15:11

1 Answers1

4

Here are a few answers:

  1. custom bindings are useful in many scenarios and, in my opinion, shouldn't be used as a last resort. Anytime that you want to connect your DOM and data in a way that is not already supported by built-in bindings, then they are a good option. As I listed above, here is an article that could help clarify.

  2. The custom binding has a relationship with the view model indirectly by calling ko.bindingHandlers.text.update. So, it is effectively wrapping the actual text binding. The text binding reads the passed in value and displays.

  3. For multiple view models, this answer describes some options for handling multiple view models.

  4. Without a custom binding, you could choose to not use jQuery and use CSS (with consideration for browser support and prefixes). For example, you could immediately add a class to an element like:

With CSS like:

.message {
    opacity: 0;
    transition: opacity 2s ease-in;
}

.load {
    opacity: 1;
}

The element would start with opacity: 0 and immediately transition to opacity: 1 over 2 seconds.

I would not recommend using jQuery directly in your view model. Custom bindings are a tool available to you for these scenarios and provide much of the power that Knockout provides.

Hope this helps.

Community
  • 1
  • 1
RP Niemeyer
  • 114,592
  • 18
  • 291
  • 211
  • What about `subscribe`? – Mark C. May 15 '15 at 16:25
  • @Invent-Animate - sorry I don't follow. Using `.subscribe` to react to something changing? – RP Niemeyer May 15 '15 at 17:07
  • Well, in the docs it does say "For advanced users, if you want to register your own subscriptions to be notified of changes to observables, you can call their subscribe function."... I was more-or-less "probing" than suggesting – Mark C. May 15 '15 at 17:14
  • @Invent-Animate - sure, any observables that are accessed in the `update` function will automatically become dependencies, but it is possible to `subscribe` yourself in the `init` function to specific observables. You would want to clean up that subscription as well. hope that makes sense! – RP Niemeyer May 15 '15 at 18:44
  • I guess the other aspect of that would be, is the `element` in scope if you utilize `subscribe`? That would be the main gist of OP's question I suppose. – Mark C. May 15 '15 at 18:47
  • @RPNiemeyer thanks for reply but sorry i just do not understand your code properly like how it works? the code you gave in your post is full code ? if possible give me a jsfiddle link where you put your code so i may try to understand. still i like to request you that if possible explain how your code works......thanks – Mou May 15 '15 at 19:26
  • i post a code where custom binding was there. can we write the same code without custom binding? i am talking about my posted code. – Mou May 15 '15 at 19:26
  • @Invent-Animate Can u please post a code here for subscribe.....so i can understand how knockout subscribe works. thanks – Mou May 15 '15 at 19:27