5

好的,这让我发疯了......我似乎无法弄清楚在淘汰赛中制作 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>

打自己....

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

4

1 回答 1

6

好吧,经过几个令人沮丧的小时......

事实证明,我所要做的就是在我的模板绑定中将 $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'总是为空......

但是,如果我将绑定定义为:

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

神奇的是,当我尝试访问我的 ListItem 时,我循环的每一行都有我的属性:-)

哦,好吧,要吸取教训......

于 2013-04-25T22:43:47.540 回答