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.

Example Widget

class @Maslosoft.BinderDev.Widgets.MyWidget

    # This field can be configured with `params` binding
	title: ''

	init: (element) =>
		# Init widget
        # 1. Apply initial state
        # 2. Attach event handlers
		element.innerHTML = @title

	dispose: (element) =>
		# Dispose widget:
        # 1. Remove event handlers
        # 2. Delete unnecessary objects

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:

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>