Form Field bindings in Knockoutjs

Rama Sagar
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 2486 red flag

Knockout is a standalone JavaScript implementation of the Model-View-ViewModel pattern with templates.For more info http://en.wikipedia.org/wiki/KnockoutJS

Introduction

This article explains about how to use form field bindings using knockout.js

  • The Click binding

   The click binding invokes a handler when the element is clicked.

<button data-bind="click: addproduct">Add Product</button>
  • The Event binding
   The event binding adds handlers to the element for the specified events.
<div data-bind="event: { mouseout: showcontent, mousein: hideHelp }">content</div>

  • The submit binding
    The submit binding allows us to invoke a handler when a form is submitted.
<form data-bind="submit: saveData">…</form>

  • The enable binding
    The enable binding controls whether the form element is enabled only when the parameter value is true.

<input data-bind="enable: isEditable, value: name" />
  • The disable binding
  The disable binding causes the associated  element to be disabled only when the parameter value is true. This is useful with form elements like input, select, and textarea.

<input data-bind="disable: isReadOnly, value: name" />

  • The Value binding
  It enables two-way binding of the field’s value to a view model value.

<p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" /></p>
  • The Hasfocus binding
  It shows the field focus when the value is set to true

<input data-bind="visible: editing, value: name, hasFocus: editing" />
  • The Checked binding
    It shows the true or false whether the checkbox is checked 
  
    when we update the value in our view model, this checks or unchecks the form control on screen.
<input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenItems" />
  •   The Option bindings
    It will populate the dropdownlist with options

<p>Choose some countries you'd like to visit: <select data-bind="options: availableCountries" size="5" multiple="true"></select></p>

    

Conclusion

In this article we have learned about different form field bindings in Knockout.js

Reference


http://knockoutjs.com

Page copy protected against web site content infringement by Copyscape

About the Author

Rama Sagar
Full Name: RamaSagar Pulidindi
Member Level: Silver
Member Status: Member,MVP
Member Since: 12/30/2012 1:51:40 AM
Country: India
ramasagar
http://www.ramasagar.com
A Software Profesional working in Microsoft .NET technologies since year 2008, and I work for Dake ACE. I am passionate about .NET technology and love to contribute to the .NET community at Dot Net Funda

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)