淘汰赛：绑定到值上点击

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; }" } 

看来不过我只得到了空对象{}，或者对象小幅上涨，其包含的节点属性。我如何设法定位我的点击事件以获取正确的值？最终，我希望能够切换它后面的isFunc值的状态，以更新一些CSS ...但我不希望使用复选框控件。

任何人都可以建议我可能是做错了什么？

感谢

Answer 1

您需要创建KO背景下，如果你想利用在单击处理“这个”值。既然你没有迭代一个集合（foreach），然后尝试使用'with'绑定，比如在外部div中，或者如果你只是想快速尝试，在提交按钮周围扔一个wrapper 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上。然后，您可以将所有后代绑定仅缩减为高度对象内的属性。就像这样：

<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引入了一个数据绑定= “用：settings.nodes.height” 关于外层div。因此，点击处理程序的'this'现在引用了settings.nodes.height对象，我相信这是你想要的。