Knockout JS + Bootstrap + Icons + html绑定

Question

好吧,这个让我疯了......我似乎无法弄清楚在淘汰赛中制作html绑定的正确方法,与twitter bootstrap元素很好地配合.

我有,以下HTML:

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

这条线实际上是一些其他li的一部分,但是我只显示了我需要的简单性.

正如你所看到的,我也在这里使用twitter bootstrap,正如icon类所证明的那样.

好的,这一切都很好,当我渲染我的菜单标签正确显示时,所有都很好地呈现在引导风格中,一切都很棒.

现在,我想改变这一点,因此,不是菜单选项总是说同样的东西,它会根据视图模型而改变.

对于我的视图模型,我使用的是带有视图模型的knockout.js,如下所示:

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

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

使用'LoadListData'函数加载时,可观察数组工作正常,并使用我在Json中的API返回的记录数组加载ListItems,每条记录如下所示:

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

这只是一条记录,有多条记录,都是从我的数据库中的用户表中检索的

这个问题感兴趣的属性是"isallowedlogin"属性.

我目前正在使用敲除模板绑定将此用户列表绑定到我的文档中的表:

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

我在这个问题的开头展示的LI标签是该模板的一部分......

<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>

渲染.所有的prety简单的东西,或者我想.

如果我使用文本绑定

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

或者我的模型中带有computedObservable/observable的文本绑定..

data-bind="text: someComputedObservable()"

事情有效,但我放松了图标

如果我使用HTML绑定:

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

或者在我的模型中使用computedObservable/observable进行html绑定.

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

即使我尝试使用像<和%22这样的东西组装字符串来编码特殊字符,我也会因为解析错误和各种疯狂而抱怨.

我的第三次尝试是使用计算的observable,并直接在函数中构建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"

只是发现你不能将任何东西传递给计算的observable,所以我不知道我在表格中呈现链接时当前在哪一行数据,因此我无法决定文本应该是什么.

所以,最后,我想...让我们在视图模型之外尝试一个常规函数......

我知道我可以将当​​前对象传递给它,并没有问题......

错误...

如果我定义:

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的方式使它成为A**中的痛苦......

有任何想法吗？

更新1

我想出了为什么我得到整个函数定义而不是返回文本的原因,看起来我是一个工具,我没有发现我没有在函数名后附加括号,所以

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

本来应该

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

拍打自己 ....

仍然在寻找关于文本更新的想法......

Answer 1

几个令人沮丧的时间后好的.....

事实证明,我所要做的就是在我的模板绑定中将$ data传递给我的计算observable ...

所以,如果我们有以下视图模型:

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';
    }
  });
} 

以前导致我的问题,因为'ListItem'始终为null ....

但是,如果我将我的Binding定义为:

data-bind="html: GetListItemText($data)"

奇怪的是,当我尝试访问我的ListItem时,我的每个行的属性都在循环:-)

哦,好的经验教训......