好的，这让我发疯了......我似乎无法弄清楚在淘汰赛中制作 html 绑定的正确方法，与 twitter 引导元素很好地配合。
我有以下 HTML：
<li><a href="#"><i class="icon-user"></i> Enable/Disable User</a></li>
这条线实际上是 ul 中的其他一些 li 的一部分，但为了简单起见，我只展示了我需要的部分。
如您所见，我在这里也使用 twitter 引导程序，图标类就是证明。
好的，这一切都很好，当我渲染我的菜单时，一个标签正确显示，所有这些都以引导样式很好地呈现，一切都很棒。
现在，我想改变这一点，这样菜单选项就不会总是说同样的事情，它会根据视图模型而改变。
对于我的视图模型，我使用了带有如下视图模型的 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”函数加载可观察数组时，可以完美运行，并使用从我的 API 返回的 Json 记录数组加载 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 根据允许的登录状态变为绿色或红色.
现在正如我之前提到的，我现在想动态更改锚标记上的文本，以便
如果 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 / 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"
只是发现您无法将任何内容传递给计算的可观察对象，因此在呈现表中的链接时我不知道我当前在哪一行数据，因此我无法决定文本应该是什么。
所以，最后，我想......让我们在视图模型之外尝试一个常规函数......
我知道我可以将当前对象传递给它，并且没有问题......
错误的...
如果我定义：
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>
当我渲染菜单时，插入到锚标记中的实际选项文本是在 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>
打自己....
仍在寻找有关文本更新的想法...