MVVM Views are driven by markup that you add to your html templates which allow users to see data, and use functionality provided by your controllers.
@View Models
Following the MVVM design pattern, your data should be published to a viewModel, which you build and assign inside your controller when it is initialized.
mwp.controller.model( 'example-controller', {
init: function() {
this.viewModel = {};
}
});
Where you get the data, and how you publish it to your view model is up to you, and is decided while you are developing your javascript controller. It can be injected into your controller from the backend, or it can be loaded via ajax, or some combination in between.
However you decide to push the data into your view model, the purpose of the view model is to provide your views with data to bind their output to.
@Knockout.js
The way that data from your view model is injected into a view is via the knockout library, and by using the data-bind attribute on your html elements to select the binding action.
<span data-bind="text: title"></span>
Therefore, all of the bindings found in the knockout documentation can be used to control your view output, plus a few more that are provided by the MWP Javascript Framework.
Want a tutorial? Learn the basics of using knockout with views.
@View Model Selection
Since there may be multiple controllers on the page which provide different view models for views to bind to, you must select a view model for your binding context by using the data-view-model html attribute on a container element.
(function($, undefined){
mwp.controller.model( 'vendor-controller-name', {
init: function() {
this.viewModel = {
quotes: ko.observableArray([{
quote: 'I have nothing to declare except my genius.',
author: 'Oscar Wilde'
}])
};
}
});
})(jQuery);
<div data-view-model="vendor-controller-name">
<!-- ko foreach: quotes -->
<blockquote>
<p class="quote" data-bind="text: quote"></p>
<em class="author" data-bind="text: author"></em>
<blockquote>
<!-- /ko -->
</div>
@MWP Knockout Bindings
The MWP Javascript Framework adds a few useful bindings which aren’t part of the core knockout.js library.
init Execute an arbitrary callback one time
The init binding executes an arbitrary function against the bound element one time when the element is rendered.
<div class="hidden" data-bind="
init: function() {
jQuery(this).removeClass('hidden');
}">
</div>
callback Execute an arbitrary callback any time an observable is updated
The callback binding will execute an arbitrary function against the bound element every time an observable dependency inside the function is updated.
<div data-bind="
callback: function() {
var c = mwp.controller.get('mycontroller-name');
jQuery(this).data('synchronized-value', c.viewModel.observableValue() );
}">
</div>
jquery
The jquery binding will iterate on an object, calling each of the property names found on the object as a jquery method on the bound object. The jquery method recieves the value of the object property as an argument. It is a quick and easy way to use arbitrary jquery plugins on elements
<input type="text" name="date" data-bind="
jquery: {
datePicker: { autoSize: true }
}"
/>