knockoutjs 点击绑定在嵌套的 foreach 中不起作用

Posted 2023-05-07

【中文标题】knockoutjs 点击绑定在嵌套的 foreach 中不起作用

【英文标题】：knockoutjs click binding not working in nested foreach

【发布时间】：2012-05-22 21:23:47

【问题描述】：

所以我有一个非常奇怪的问题，即 knockoutjs 点击绑定没有附加到锚标签。其他 data-bind="" 有效，但点击绑定无效。

您可以在下面看到 html 和部分 viewmodel js 文件

var tag = function (data) 
    this.count = data.Count;
    this.id = data.Id;
    this.title = data.Title;
    this.tagGroup = data.TagGroup;
;
 var tagContainer = function (data) 
    this.tagList = $.map(data.Tags, function (item)  return new tag(item); ); 
    this.letter = ko.observable(data.Letter);
;

var searchViewModel = function()
   var self = this;

   self.tagContainerList = ko.observableArray([]); 

   self.addFilter = function (tag)  
    //move tag to active filters and do some more cool stuff here 
    ;


;

<div id="modal-all-tags" data-bind="with:searchViewModel">
    <ul data-bind="foreach:tagContainerList">
        <li>
            <span data-bind="text:$data.letter()"></span>
            <ul data-bind="foreach:tagList">
                <li><a href="#" data-bind="click:$root.addFilter"><span data-bind="text:title"></span></a></li>

            </ul>
        </li>
    </ul>

      <a class="close-reveal-modal">&#215;</a>
</div>

基本上它是一个模态弹出窗口，当用户单击页面上的链接时会加载它。 我向服务器发送一个请求，它返回一个标签容器列表，每个标签容器都有一个起始字母和一个要在字母下方呈现的标签列表，如下所示： 一种 一句话1 一句话2 乙 b 字 1 b 字 2 C c字1 c字2

等等……

字母 A、B、C 正确呈现，并且每个字母都得到正确的标签列表呈现在它们下方，并且 text:title 显示正确。

除了 addFilter(); 之外的一切都有效我想绑定到 taglist 中的每个链接的函数。浏览器只是跳起来并在 url 中添加一个哈希字符。 Firebug 也没有在绑定上显示任何错误。

div 容器有一个 with:searchViewModel 的原因是因为整个页面都有一个主视图模型。但这无关紧要，因为它正在项目的所有其他页面上工作。

我唯一能想到的是点击绑定 $root.addFilter 是错误的，但我只尝试了 addFilter ，其中 firebug 给出了错误“addFilter is not defined;”

我尝试了 $parent 和 $root。

有人有什么建议吗？

【问题讨论】：

您能解释一下您是如何解决的吗，我将不胜感激。

【参考方案1】：

我有一个想法。您的 addFilter 函数需要一个参数 (tag)，但您没有在绑定中传递任何内容：

<a href="#" data-bind="click:$root.addFilter">

这可能是问题吗？

大概是这样的：

<a href="#" data-bind="click:function()  $root.addFilter($data) ">

会有帮助吗？

【讨论】：

不幸的是，$parent.addFilter 也不是用 $root 尝试的函数。但它确实给了我一个想法，我会用这种方法尝试一些事情。

仍然没有运气，我在页面的其他部分使用 click:addFilter，您可以在其中添加搜索过滤器，如果您在迭代时调用函数，通常不需要 $data一个可观察的数组

很抱歉听到这个消息。您说“Firebug 也没有在绑定上显示任何错误。”这意味着您的 addFilter 函数被调用，否则会引发错误。您是否尝试在 addFilter 函数上设置断点（我发现 Chrome 非常适合调试淘汰赛）并查看函数内部是否存在问题？我建议您检查 tag 参数中传递的内容，看看是否是问题所在。

萤火虫中没有绑定错误，这通常可以帮助我找到错误，但这次它只是安静:(点击绑定从未附加到锚标记，因为甚至没有运行 preventDefault 行为，这意味着浏览器尝试导航到#

那我被困住了，Kimpo。要么是在你的问题中添加一个 jsFiddle，要么另一个 SO 用户会站出来。对不起！

【参考方案2】：

我遇到了类似的事情，起初我跑了data-bind="click:function() console.log($parents) "。请注意，它的 $parents 不是 $parent。我查找了上下文，我需要的内容类似于 data-bind="click:$parents[1].onCardClick"

【讨论】：

Xerri 提供了一个非常可行的解决方案，我陷入了完全相同的情况，它解决了我的问题。我所做的唯一改变是把括号 data-bind="click:$parents[1].onCardClick() 和它作为魅力。

这也是我的问题，嵌套 foreach 循环内的点击绑定不能与 $parent.onCardClick 一起使用，也不能与 $root.onCardClick 一起使用（它说 root 未定义）。这是一个很好的解决方案。

【参考方案3】：

我在 ko 上下文中找到并尝试使用如下示例。 $parentContext.$parent.onButtonClick