Menu

Maslosoft Binder Logo Maslosoft Binder Documentation
Knockout JS tracker and binding handlers with coffee and sugar

Edit

Widget

Widget Binding Handler creates widget dynamically. This binding handler will apply params to widget and call init method if available when creating widget and dispose method when widget should be destroyed.

Both init and dispose method will receive current element as parameter.

All parameters passed to params will be applied to widget object matching parameter name to object instance property name.

The ref option will set value of passed reference name to widget instance. The ref value must be of type string, representing path to javascript reference. Using this parameter it is possible to use widget outside Knockout JS scope.

However when ref is object, and no widget param is present, this binding will reuse existing object.

Example Widget Output:
Toggle Widget | Show ref (in console)
Widget log:
Example Widget With ref reusing existing object:
Widget log of second widget:

Relevant code used in examples:

<!-- ko if: binder.model.toggle.enabled -->
<div data-bind="widget: Maslosoft.BinderDev.Widgets.MyWidget,params: {­title:'My Title'­},ref: 'binder.model.ref'" class="well">

</div>
<!-- /ko -->
    <div data-bind="ref: binder.widget.other" class="well">

    </div>
<script>
	window.onload = (function () {­
		binder.model.toggle = ko.tracker.factory({­enabled: true­});

		binder.widget.other = new Maslosoft.BinderDev.Widgets.MyOtherWidget();
        binder.widget.other.title = 'Title set in JavaScript';

		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
		jQuery('body').tooltip({­
			selector: '[rel~="tooltip"]'
		­});
	­});
</script>