Question

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

我有以下HTML：

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

这一行实际上是ul中其他一些li的一部分，但我只是为了简单而只显示我需要的那些。

正如你所看到的，我也在这里使用twitter bootstrap，如图标类所示。

好的，这一切都很好，当我渲染我的菜单标签正确显示时，所有都很好地呈现在引导样式中，一切都很棒。

现在，我想改变它，所以不是菜单选项总是说同样的东西，它会根据视图模型而改变。

对于我的视图模型，我使用的是具有如下视图模型的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()"

即使我尝试使用像＆lt;这样的东西来组装字符串，我也会因为解析错误和各种各样的疯狂而抱怨。和％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文件中键入的函数定义!!!

Mad menus!

我想要做的就是更新文本而不删除图标，如果我必须手工构建包含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时，我的每个行都有我的属性： - ）

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

Knockout JS + Bootstrap + Icons + html绑定

更新1

1 个答案: