TechnoBuzz

A Techno Blog, mainly about Java

Knockout jQuery Binding and Visibility

Reading more on Knockout js

Here is the panel we will enable or disable:

< div id=”optionalPanel” style=”color: red;” data-bind=”visible:isEnabled”>The following is an example div</div>

Here we have a button that sends an event when it is clicked

< input type=”button” id=”Button1″ value=”My Button” data-bind=”event: { click:buttonEvent } ” /> 

Here is what the associated binding  (javascript) looks like:

function viewModel() {
   var self = this;

    myValues = ko.observableArray([]);

    this.isEnabled = ko.computed(function () {   return myValues().length > 0;  }    );

    // Here when er receive event we enable div tag by making size of myValues greater than zero

    buttonEvent = function (selectedSection, userAction) { myValues.push(“some value”);   };

};

//Must apply a model to bindings
ko.applyBindings(new viewModel());

The documentation for this example (also an example with booleans).

Likewise, here is an example of using anonymous function in html to reference the javscript bindings.

A  dropdown  binding example

More binding techniques

Site point series : 1 2 3

special comments for “if” binding

select list  example (i.e. picklist) , alternate select list example

Advertisements

July 21, 2012 - Posted by | Uncategorized | ,

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: