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

Access Control For User Interface Elements


This binding will check if users is allowed action, and hide element if denied. Before use, action need to be defined by static property Maslosoft.Binder.Acl.allow of ACL binding handler. This property should contain Access Control checking function. This function need to return boolean true or false

Access control function will get parameters same as observable value. In fact this binding handler will simply pass it's value to access control cheching function and display or hide element according to this function's result.

Using in HTML

Checking roles is performed by user defined function, which will get all parameters passed to observable. This way Your access control logic can be arbitrarily customized.

This binding requires observable value to allow updates. However format of value is not strict, as it's simply passed to checking function defined as Maslosoft.Binder.Acl.allow.

In this example ACL consist of roles as a object keys and user observable object instance as a value:

<div data-bind="acl: {­'<role-name>': <observable-user-instance>}­"><ui-element></div>

If updates are not required, even string value can be passed.

Live Example

In this example user has always granted access to, and access to action.two is dependent on its isGuest property value.

Try to click buttons to see result:

Should be visible always Should be visible for registered

Relevant code used in examples:

	<span data-bind="acl: {­'': binder.model.AclUser­}" class="label label-warning">Should be visible always</span>
	<span data-bind="acl: {­'action.two': binder.model.AclUser­}" class="label label-success">Should be visible for registered</span>
	<br />
	<br />
	<button class="btn btn-success" id="allow">Allow Access</button>
	<button class="btn btn-danger" id="deny">Deny Access</button>
	window.onload = (function () {­
		var actionAllowed = '';

		// This is example function to check access
		binder.myAcl = function (acl) {­
			console.log("Checking acl: ", acl);
			if (acl['']) {­
				return true;
			if (acl['action.two'] && !acl['action.two'].isGuest) {­
				console.log('Allow action.two');
				return true;
			return false;
		// Apply bindings
		Maslosoft.Binder.Acl.allow = binder.myAcl
		binder.model.AclUser = new Maslosoft.Koe.AclUser();
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));