gpt4 book ai didi

html - Knockout JS + Bootstrap + 图标 + html 绑定(bind)

转载 作者:太空狗 更新时间:2023-10-29 15:50:45 25 4
gpt4 key购买 nike

好吧,这个让我发疯......我似乎无法找出在淘汰赛中制作 html 绑定(bind)的正确方法,很好地与 twitter bootstrap 元素一起玩。

我有以下 HTML:

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

这条线实际上是 ul 中其他一些 li 的一部分,但为了简单起见,我只展示了我需要的部分。

如您所见,我也在此处使用了 twitter bootstrap,正如图标类所证明的那样。

好的,所以这一切都很好,当我渲染我的菜单时,标签正确显示,所有这些都以 bootstrap 风格很好地呈现,一切都很棒。

现在,我想改变这一点,而不是菜单选项总是说同样的事情,它会根据 View 模型而改变。

对于我的 View 模型,我使用 Knockout.js 和如下所示的 View 模型:
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”属性。

我目前正在使用淘汰模板绑定(bind)将此用户列表绑定(bind)到我的文档中的表:
<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 标签和 anchor 等,我只展示了这个问题所需的内容。

到现在为止还挺好...

我得到一个表格,里面有我的所有用户,每行末尾有一个链接,当我加载数据时,所有绑定(bind)都很好用,行上的 css 会根据允许登录状态变为绿色或红色.

现在正如我之前提到的,我现在想动态更改 anchor 标记上的文本,以便

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

呈现。所有非常简单的东西,或者我是这么认为的。

如果我使用文本绑定(bind)
data-bind="text: 'Disable User'"

或在我的模型中使用计算的可观察/可观察的文本绑定(bind)..
data-bind="text: someComputedObservable()"

一切正常,但我失去了图标

如果我使用 HTML 绑定(bind):
data-bind="html: '<i class="..."></i> Disable User'"

或者在我的模型中带有一个带有计算的Observable/observable 的html 绑定(bind)..
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';
}
});
}

然后我试图绑定(bind):
data-bind="html: $parent.GetListItemText"

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

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

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

错误的...

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

在我的 View 模型之外,然后按如下方式绑定(bind)它:
<li><a href="#" data-bind="html: GetMenuEnabledDisabledOptionText">xx</a></li>

当我渲染菜单时,插入 anchor 标记的 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>

打了自己一巴掌……

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

最佳答案

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

事实证明,我所要做的就是将 $data 传递给我在模板绑定(bind)中计算的可观察对象......

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

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”总是为空而导致我出现问题....

但是,如果我将绑定(bind)定义为:
data-bind="html: GetListItemText($data)"

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

唉,要吸取教训了......

关于html - Knockout JS + Bootstrap + 图标 + html 绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16225210/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com