Question

我似乎在努力绑定点击对象，我无法弄清楚原因。我的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>

我的问题在于我底部的提交按钮。这些设置具有以下JSON结构 - 使用ko.mapping将其转换为挖空对象：

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

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

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

但是我似乎只获得了空对象{}，或者稍微高一点的对象包含nodes属性。如何设置定位我的点击事件以获取正确的值？最终我希望能够切换后面的isFunc值的状态，更新一些CSS ......但我不想使用复选框控件。

任何人都可以建议我可能做错了吗？

由于

Answer 1

如果要在点击处理程序中利用“this”值，则需要为KO创建上下文。既然你没有迭代一个集合（foreach），那么尝试使用'with'绑定，例如在外部div中，或者如果你只是想快速尝试，在提交按钮周围抛出一个包装器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，那么你很可能会想要把' ：最外层div上的settings.nodes.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>

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

This fiddle在外部div上没有使用'with'绑定，因此根ViewModel是点击处理程序的'this'所绑定的（这听起来像你不想要的）。我添加了一个'fx2'按钮，它将使用ko.mapping.toJSON转储'this'。正如评论中所讨论的那样，JSON.stringify将不会显示您的可观察属性，这些属性实际上是此时的函数。

This other fiddle在外部div上引入了data-bind =“with：settings.nodes.height”。因此，点击处理程序的'this'现在指的是settings.nodes.height对象，我相信这就是你想要的。

淘汰赛：点击时绑定到值

1 个答案: