Knockout JS + Bootstrap + Icons + html binding

ok, this one turns me on ... I just can't figure out the right way to do html bindings in a knockout, play well with twitter bootstrap elements.

I have the following HTML:

<li><a href="#"><i class="icon-user"></i> Enable/Disable User</a></li>

This line is actually part of some of the other li that are in ul, but I only show the bit that I need for simplicity.

As you can see, I also use twitter bootstrap here, as evidenced by the icon class.

Okay, so everything is fine when I display my menu that the tag is displayed correctly, everything is beautifully decorated in the bootstrap style, and everything is fine.

Now I want to change this, so instead of a menu option that always says the same thing, it changes depending on the presentation model.

For the models of my view, I use knockout.js with a view model that looks like this:

function UserListViewModel()
{
  var self = this;
  self.ListItems = ko.observableArray([]);

  self.LoadListData = function()
  {
    self.ListItems([]);
    $.getJSON('/api/getusers',null,function(results)
    {
      self.ListItems(results);
    }
  }
} 

The observed array when loaded using the LoadListData function works fine and loads ListItems with an array of records returned from my API in Json, each record looks like this:

{"recordid": 1, "loginname": "joe", "fullname": "joe person", "isallowedlogin": 1}

This is just one entry, there are several, all extracted from my users table in my db

the property of interest to this question is the "isallowedlogin" property.

I am currently binding this list of users to a table in my document using a knockout template binding:

<tbody data-bind="template: { name: 'UserListItemTemplate', foreach: ListItems, as: 'ListItem' }">
</tbody>

And the LI tag that I showed at the beginning of this question is part of this template ...

<script type="text/html" id="UserListItemTemplate">
  <tr data-bind="css: { success: loginallowed == 1, error: loginallowed == 0}">
    <td data-bind="text: recordid">xx</td>
    <td>
      <li><a href="#"><i class="icon-user"></i> Enable/Disable User</a></li>
    </td>
  </tr>
</script>

, LI .., , .

...

, , , css .

, , ,

IF isallowedlogin = 1,

<li><a href="#"><i class="icon-user"></i> Disable User</a></li>

IF isallowedlogin = 0,

    <li><a href="#"><i class="icon-user"></i> Enable User</a></li>

. , .

data-bind="text: 'Disable User'"

computedObservable/ .

data-bind="text: someComputedObservable()"

,

HTML:

data-bind="html: '<i class="..."></i> Disable User'"

html computedObservable/observable .

data-bind="html: '<i class="..."></i> ' + someComputedObservable()"

, , , , < % 22 .

, HTML :

function UserListViewModel()
{
  var self = this;
  self.ListItems = ko.observableArray([]);

  self.GetListItemText = ko.computedObservable(function(ListItem)
  {
    if(ListItem.isloginallowed == 1) {
      return '<i class="icon-user"></i> Disable User';
    }
    else {
      return '<i class="icon-user"></i> Enable User';
    }
  });
} 

:

data-bind="html: $parent.GetListItemText"

, , - , , , , .

, , ... , ...

, ...

...

:

function GetMenuEnabledDisabledOptionText(ListItem)
{
    if(ListItem.isloginallowed == 1) {
      return '<i class="icon-user"></i> Disable User';
    }
    else {
      return '<i class="icon-user"></i> Enable User';
    }
}

, :

<li><a href="#" data-bind="html: GetMenuEnabledDisabledOptionText">xx</a></li>

, ACTUAL, , , JS .

, , , , , HTML , , , .

, , , JavaScript **, ...

?

1

, , , , , , ,

<li><a href="#" data-bind="html: GetMenuEnabledDisabledOptionText">xx</a></li>

<li><a href="#" data-bind="html: GetMenuEnabledDisabledOptionText()">xx</a></li>

....

, ...