Want to understand a specific knockout js custom binding

[Tridip Bhattacharjee]

i am new in knockout js. so often various code confuse me to understand their flow. here i like to post code which is not clear to me. so please see the code and explain in such a way so i could understand it properly.

here is a jsfiddle link http://jsfiddle.net/rniemeyer/Rn9tg/

full code as follows

<button data-bind="click: greet, jqButton: { icons: { primary: 'ui-icon-gear' } }">Test</button>

ko.bindingHandlers.jqButton = {
    init: function(element, valueAccessor) {
        var options = valueAccessor() || {};
        $(element).button(options);

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).button("destroy");
        });
    }
};

var viewModel = {
    greet: function() {
       alert("Hello");
    }
};

ko.applyBindings(viewModel);

1) i do not understand this line

jqButton: { icons: { primary: 'ui-icon-gear' } }

2) also do not understand this code

ko.bindingHandlers.jqButton = {
    init: function(element, valueAccessor) {
        var options = valueAccessor() || {};
        $(element).button(options);

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).button("destroy");
        });
    } 
};

what the

init

code is doing?

if possible please some one help me to understand the

init

code for each line like what is the meaning of each line. thanks

this area is not clear at all

jqButton: { icons: { primary: 'ui-icon-gear' } }

so please explain it easy way. thanks in advance.

[Gunnar Liljas]

Please see this:

http://knockoutjs.com/documentation/custom-bindings.html

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Noirabys]

hi,

 init: function(element, valueAccessor) {

element is the dom elment "button" where you've defined the data-bindings

valueAccessor is the object you supply along with the custom binding:

jqButton: { icons: { primary: 'ui-icon-gear' } }

it is the object which follows jqButton (in json litteral notation): 

{  

   icons: { 

     primary: 'ui-icon-gear' 

   } 

}

it is wrapped inside an observable thus you can access it with 

  valueAccessor();

  var options = valueAccessor() || {};
// if nothing return by valueAccessor supply an empty object;

 $(element).button(options);       

// attach jquery ui? button plugin with the options 

 icons: { primary: 'ui-icon-gear' }

1. ko.applyBindings will parse the html code and inspect its data-bindings

2. for each data-binding the init method will be called and the dom structure and contexts will be created

greetings,

noirabys