0

我似乎很难通过点击绑定到一个对象，我不知道为什么。我的 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; }" }

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

谁能建议我可能做错了什么？

谢谢

4

1 回答 1

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，那么你很可能会想要放置 'with: 设置。最外层div上的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 中。

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

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

于 2013-04-15T16:39:00.070 回答