It’s a very common requirement to show or hide elements in a UI based on the
users roles. Depending on the view technology this can be quite a challenge.
The most convenient way to do this, is by declaratively marking
the sections. With DukeScript it’s pretty simple. You can bind the visibility of an element to some property
in the view model.
The problem is, that you need to introduce a lot of properties in your viewmodel.
It would be much better, if you could simply add roles to a global user object
and use this to control visibility:
The user object can live in our root context and we can check if this user has the
Now we need to create the “authorize”-binding. The tricky part is, that
this needs to work in any binding context. If we bind several viewmodels to different
parts of the page, each of them has their own root context. So we cannot rely on a common $root.
In this example I’m using document.getElementById(“security-manager”)
to get hold of an element in the relevant root context. I get the User object from it
and subscribe to changes in the users roles:
If the user has the right role, I show the element, otherwise it will be hidden.
A pretty simple way to control access in a fine-grained way.
You can try it out yourself. I created a github project for you to play with: