Dynamic html content depending on user's role - backbone.js

Question

I am developing single page application style web application.
I want to create menu based on user's role, for example, for admin users I want show admin menu and html content, for general users I want to show different html content.
I am using asp.net mvc with Razor view engine, so this could be achieved by Razor code as follow :
#if (#User.IsInRole("Admin"){
-- html content for admin --
}else if (#User.IsInRole("General"){
-- html content for general user --
}else{
-- html content for the other users --
}
This was the typical way when I was developing web application in traditional way in the past, however since I started developing single page application style web application, I tried to write pure html code and avoided using server side view engile such as Razor, WebForm in asp.net or Velocity, Jsp tag library in Java EE. I want to write more independent front-end code without server code dependency.
Anyhow, above code can be changed as follow when I use javascript and knockoutjs instead of Razor,
<!-- ko if: isAdmin -->
-- html content for admin --
<!-- /ko -->
<!-- ko if: isGeneralUser -->
-- html content for general user --
<!-- /ko -->
<!-- ko if: isOtherUser -->
-- html content for the other users --
<!-- /ko -->
isAdmin, isGeneralUser and isOtherUser are properties of viewmodel and these values will be set via ajax call which check user's role.
What I am wondering is whether this sort of way to controll content upon user's role is fine or not from security's perspective?
How do you handle view content if those views are different depending on user's role?
I would like to how do you guys handle this kind of situation.

Answer 1

I would use a template binding
<div data-bind="template: { name: template, data: model }"></div>
On the viewmodel set the correct template and model depending on User role, also, you still need to protect the role specific methods server side
A little side note, I've done a little framework for Convention bound templates, its perfect for scenarios like this, its not done yet so I would wait to use it in a production site, but it will be ready in the coming weeks
The Template binding above would with my framework look like
<div data-bind="coc: model"></div>
If the ViewModel is named AdminViewModel than my library will look for a templte named AdminView
A little fiddle http://jsfiddle.net/2Uvd5/1/
edit: Fore a more accurate example on what you wanna do
http://jsfiddle.net/XaZxj/