RSS

Tag Archives: knockout.js

jQuery UI Call After Knockout JS Binding (Knockout Custom Binding)

My team was having problem with calling jQuery UI widget, specifically Button widget, to modify the look and feel of the buttons. Our root of the problem is because we are calling jQuery UI before Knockout binding happens. Because our Knockout binding is actually creating more DOM element, jQuery UI call before binding will not apply. For design reason, our jQuery UI code can’t live after Knockout binding.

This is a typical scenario where Knockout Custom Binding comes to rescue, and obviously, one of the use case.

First, we define Knockout Custom Binding:


ko.bindingHandlers.jQueryUIButton = {

    init: function(element, valueAccessor) {

        var options = valueAccessor() || {};

        $(element).button(options);

    }

}

Then, data bind:


<button data-bind="jQueryUIButton: { icons: { primary: 'ui-icon-locked' }, text: false }"></button>

Read more on how Knockout Custom Binding works here… If you are JavaScript programmer, Knockout should be in your tool belt.

Advertisements
 
Leave a comment

Posted by on December 13, 2012 in General

 

Tags: , ,

Quick Take on MVC x MVP x MVVM

I wish I am more diligent to create visual diagram for this post. But, here’s the take.

MVP

A variation of MVC pattern and mostly implemented in ASP.NET web form to achieve separation of concern such in MVC. In MVP, Presentation knows about the View through View’s contract (interface). Suggested reading: Jean-Paul Boodhoo’s August 2006 Design Patterns column.

MVC

Very similar to MVP, but in MVC, the controller (Presenter in MVP) doesn’t refer back to View. A controller can be used by multiple Views. This is achieved with Action (a method in controller) in ASP.NET MVC. Suggested reading: Niraj Bhatt’s MVC vs MVP vs MVVM.

MVVM

Similar to Martin Fowler’s Presentation Model pattern, MVVM pattern is introduced by John Gossman in 2005, tailor-made to harness the core feature and power of WPF (and Silverlight) platform. In MVVM, as in Presentation Model pattern, the ViewModel keeps up to date with the View, the two always sync with each other. Suggested reading: Josh Smith’s The Evolution of Model-View-ViewModel.

MVVM in JavaScript

In recent years, MVVM has also been implemented in JavaScript as a framework, such in KnockoutJS or Kendo MVVM. Suggested reading: Addy Osmani’s Understanding MVVM – Guide for JavaScript Developers

ASP.NET MVC’s View Models

In ASP.NET MVC, there is something called View Models. This is not to be confused with MVVM pattern. View Models is objects defined in class that each View in MVC interact with. The difference between View Models and Model in MVC is that Model refers to the objects that the whole application interact. Suggested reading: Stephen Walther’s ASP.NET MVC Create View Models

Other Sources

More links for more readings about the three:

MVVM vs MVP vs MVC: The concise explanation
MVVM vs MVP vs MVC: The differences explained

 
Leave a comment

Posted by on July 13, 2012 in General

 

Tags: , , , ,

 
%d bloggers like this: