Knockout.js 敲除：单击时绑定到值

我似乎很难在点击时绑定到一个对象，但我不知道为什么。我的HTML的一个片段如下所示：

     <div class="moodControlGroup">
        <label class="control-label" for="nodeHeight">Height</label>
           <div class="controls">
              <input type="text" class="query" id="nodeHeight" data-bind="value: settings.nodes.height.value" />
              <textarea class="queryExpanded funcText" data-bind="value: settings.nodes.height.funcValue"></textarea>
           </div>
           <input class="fx btn btn-primary" type="submit" value="fx" data-bind="click: function(item) { alert(JSON.stringify(item)) ; }, css: { selected: settings.nodes.height.isFunc }" />
     </div>

我要做的是单击“提交”按钮，然后获取高度对象：

height: { isFunc: true, value: 24, funcValue: "function(d) { return d.dy; }" }

然而，我似乎只得到空对象{}，或者稍微高一点的对象，它包含nodes属性。我如何以我的点击事件为目标来获取正确的价值？最终我希望能够切换它后面的isFunc值的状态，以更新一些CSS。。。但我不希望使用复选框控件

有人能告诉我可能做错了什么吗

---

谢谢

如果要利用单击处理程序中的“this”值，需要为KO创建上下文。由于您没有迭代集合（foreach），因此请尝试使用“with”绑定，例如在外部div中，或者如果您只是想快速尝试，请在submit按钮周围抛出包装器div，并在其上使用数据绑定

大概是这样的：

<div data-bind="with: settings.nodes.height">
    <input class="fx btn btn-primary" type="submit" value="fx" data-bind="click: function(item) { alert(JSON.stringify(item)) ; }, css: { selected: isFunc }" />
</div>

我不确定最终的代码会是什么样子，但是如果您在这个块中要做的只是绑定到settings.nodes.height，那么您很可能希望将“with:settings.nodes.height”放在最外层的div上。然后您可以将所有子体绑定减少到height对象中的属性。像这样：

<div class="moodControlGroup" data-bind="with: settings.nodes.height">
        <label class="control-label" for="nodeHeight">Height</label>
           <div class="controls">
              <input type="text" class="query" id="nodeHeight" data-bind="value: value" />
              <textarea class="queryExpanded funcText" data-bind="value: funcValue"></textarea>
           </div>
           <input class="fx btn btn-primary" type="submit" value="fx" data-bind="click: function(item) { alert(JSON.stringify(item)) ; }, css: { selected: isFunc }" />
     </div>

高度

更新：在评论中进行了简短的讨论之后，我决定将您的代码粘贴到JSFIDLE中

在外部div上使用no'with'绑定，因此根ViewModel就是click处理程序的'this'绑定的对象（听起来像是您不想要的）。我添加了一个“fx2”按钮，它将使用ko.mapping.toJSON转储“this”。正如注释中所讨论的，JSON.stringify不会显示可观察的属性，这些属性实际上是函数

---

在外部div上引入了一个data bind=“with:settings.nodes.height”。因此，单击处理程序的“this”现在指的是settings.nodes.height对象，我相信这正是您想要的对象。

我们可以看到您的.applyBindings调用吗？@LatencyMachine:抱歉，我应该包括这个。我现在手头没有代码，但是应用绑定需要一个ViewModel。ViewModel有一个设置对象，然后该对象又有节点。因此将类似ViewModel:{Settings:{Nodes:{…}}}}作为JSON对象。感谢LatencyMachine的回答，我实际上尝试使用with，但在两个项的JSON化版本（函数的第一个参数）和“this”上发出警报，留下了一个空对象“{}”，所以我无法按语法访问value/isFunc等。我明白了。也许这会有所帮助：请记住，“this”的所有属性都是可观察的——这意味着它们都是函数。也许这就是为什么您在alert中看到“object{}”或其他内容。跟进：因此，不要使用JSON.stringify，而是尝试使用ko.toJSON（this）创建转储字符串。这是函数的一个优点。。。我明天第一件事就是试试，然后告诉你结果。看看我更新的答案。我也贴了几把小提琴。我想这会让你达到目的。干杯

<div class="moodControlGroup" data-bind="with: settings.nodes.height">
        <label class="control-label" for="nodeHeight">Height</label>
           <div class="controls">
              <input type="text" class="query" id="nodeHeight" data-bind="value: value" />
              <textarea class="queryExpanded funcText" data-bind="value: funcValue"></textarea>
           </div>
           <input class="fx btn btn-primary" type="submit" value="fx" data-bind="click: function(item) { alert(JSON.stringify(item)) ; }, css: { selected: isFunc }" />
     </div>