Knockoutjs 3.X API Fourth Chapter click Binding _javascript Tips

Objective

The main function of the click binding is to call the associated JS function when the DOM element is clicked. Most commonly used for button, input, a element.

For example:

You ' ve clicked 0timesClick me

Source:

<div>
' ve clicked <span data-bind= "Text:numberofclicks" ></span> times
<button Data-bind= "Click:incrementclickcounter" >click me</button>
</div>
<script type= "text/ JavaScript ">
var viewModel = {
numberOfClicks:ko.observable (0),
incrementclickcounter:function () {
var previouscount = This.numberofclicks ();
This.numberofclicks (Previouscount + 1);
}
;
</script>

As in the example above, when a button is clicked, it triggers the incrementclickcounter callback function to update the view state.

Note, the click of the following does not necessarily have to be a function of the view model. Can be a function of any object, directly referenced. For example: Click:someObject.someFunction.

Note 1: Pass a parameter

In your handler, the UI shows an array of monitoring properties, such as:

Londonremove
Parisremove
Tokyoremove

Source:

<ul data-bind= "Foreach:places" >
<li>
<span data-bind= "text: $data" ></span>
<button data-bind= "click: $parent. Removeplace" >Remove</button>
</li>
</ul>
<script type= "Text/javascript" >
function Myviewmodel () {
var self = this;
Self.places = Ko.observablearray ([' London ', ' Paris ', ' Tokyo ']);
The current item would be passed as the "the" and "so we know which" to remove
Self.removeplace = functi On [place] {
self.places.remove (place)
}
}
ko.applybindings (new Myviewmodel ());
</script>

When you click Remove, only the current item is deleted, and from the source, the current project is passed. This is especially useful when rendering collection data.

Two points to note:

If you are nested in a binding context, for example, if you use a foreach or with binding, but your handler is a root view model or some other parent model, you need to use a prefix such as $parent or $root to locate the handler function.
In your view model, but this is an alias that you can use self (or some other variable) as this.

Note 2: Passing event objects (multiple parameters)

In some cases, you may need to access the event object of the DOM, in general Ko will pass the event object as the second argument to the function. For example:

<button data-bind= "Click:myfunction" > Click
me
</button>
<script type= "Text/javascript" ">
var viewModel = {
myfunction:function (data, event) {
if (event.shiftkey) {
//do something Different when user has shift key down
} else {
//do normal action
}}}
;
Ko.applybindings (ViewModel);
</script>

If you want to pass more parameters, you can use the method of the function text. For example:

<button data-bind= "click:function (data, event) {myfunction (' param1 ', ' param2 ', Data, Event)}" >
click me< C19/></button>

There are also more elegant methods of writing, such as using the BIND function to bind multiple parameters. For example:

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

Note 3: Allow default click action

By default, KO blocks any default actions. For example, if you bind click to a label on a, the browser invokes the callback function of the click Binding when clicked. However, an HREF connection jump is not performed.

If you do not want this default blocking action. You can return true in the callback function.

Note 4: Prevent bubbling events

By default, KO allows the click Binding to continue to any high-level event handling. For example, both the parent element and the child element have the click Binding, so the click bindings of the two elements are triggered.

You can use an additional binding clickbubble to resolve the problem:

<div data-bind= "Click:mydivhandler" >
<button data-bind= "Click:mybuttonhandler, Clickbubble:false" >
Click me
</button>
</div>

As in the example above, Mybuttonhandler will be invoked, and the attachment is bound clickbubble, and set false so that the mydivhandler of the parent element is not invoked.

Note 5: Interacting with jquery

If there is a jquery click event, KO will invoke the jquery click event, and if you want to always use your own local events, add the following code to the Ko.applybindings:

Ko.options.useOnlyNativeEvents = true;

The above is a small set to introduce the Knockoutjs 3.X API Fourth chapter of the click Binding, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!