Knockoutjs Study Notes (ix)

Because the content of the component binding section is more complex, I skip this section for a while and learn the click Binding section First.

The click Binding can be used not only for buttons, input, a and other elements, but also for any other visible DOM element.

The following is a simple example:

HTML section:

1 <Div>2You ' ve clicked<spanData-bind= "Text:numberofclicks"></span> Times3     <ButtonData-bind= "Click:incrementclickcounter">Click Me</Button>4 </Div>

JS section:

1 functionMyviewmodel () {2     varSelf = This;3Self.numberofclicks = ko.observable (0);4Self.incrementclickcounter =function() {5         varPreviouscount =self.numberofclicks ();6Self.numberofclicks (Previouscount + 1);7     };8 }9 TenKo.applybindings (NewMyviewmodel ());

It is important to note that the method of Numberofclicks modification.

The click Binding can not only bind methods in ViewModel, but can also bind any other method.

Note : When invoking a handler for the click Binding, we can pass a parameter to it as the current item, which is often useful when working with collections or arrays.

The following is a simple example:

HTML section:

1 <ulData-bind= "Foreach:people">2     <Li>3         <spanData-bind= "text: $data"></span>4         <ButtonData-bind= "click: $parent. Removeperson">Remove</Button>5     </Li>6 </ul>

JS section:

1 functionMyviewmodel () {2     varSelf = This;3Self.people = Ko.observablearray (["Kazusa", "Chiaki", "Charlie" ]);4Self.removeperson =function(person) {5 Self.people.remove (person);6     };7 }8 9Ko.applybindings (NewMyviewmodel ());

Note the use of $parent in the above example, when using the foreach binding or with binding, be sure to identify the range of Viewmodelproperty that you can call directly, if at a higher level, consider using $parent or A prefix such as root.

Note Two : At some point, we need to get the DOM event object that is associated with the Click event (which I think can be directly said to be an event that triggers the corresponding handler of the binding), including the Click. Ko takes this event as the second parameter of the handler function, for example, if we want the clik of the SHIFT key to be different from the general click, you can use this parameter to differentiate between the processing function.

If we need to pass more parameters, there are two ways to do this:

 1  <  button  data-bind  = "click:function (data, event) {myFunction (' param1 ', ' param2 ', Data, event)}"  Span style= "color: #0000ff;" >>  2   Click me  3  </ button  >  

1 <  data-bind= "Click:myFunction.bind ($data, ' param1 ', ' param2 ')">2     Click me3</button>

The second way to use the Bind method, you can refer to function.prototype.bind (), this stay for later study .

Note Three : By default, using the click binding masks the default function of the previous click, for example a element, after using the click Binding, does not jump to the address described by the href. If we want to restore the default functionality, we just need to return a true at the end of the handler that the click Binding is bound to.

Note Four : At some point, our HTML section may have nested click binding cases, as follows:

1 <DivData-bind= "Click:function1">2     <DivData-bind= "Click:function2">3         <ButtonData-bind= "Click:function3">Click Me</Button>4     </Div>5 </Div>

In this case, if we click on the button on the page, Function3, function2, function1 will be triggered in turn. To prevent this, we can attach clickbubble:false after data-bind to prevent the Click event from continuing to pass up, for example, we changed the code to this:

1 <DivData-bind= "Click:function1">2     <DivData-bind= "Click:function2">3         <ButtonData-bind= "Click:function3, Clickbubble:false">Click Me</Button>4     </Div>5 </Div>

This will only trigger function3. And if we add it after function2, only Function3 and function2 are triggered in turn, and so on.

Knockoutjs Study Notes (ix)