Question

我在我的ASP.NET代码中创建了一个C＃文件后面的复选框。我在将控件添加到页面之前添加了一个属性值，因此ASP将该属性添加到复选框周围的范围和文本的标签。它看起来像这样：

<span data-bind="visible: showCheckBox(this)">
   <input id="" type="checkbox" name="ctl00$MainContent$SecondaryForm$ctl00" value="1">    
   <label for="">Outside Source</label>
</span>

我有一个名为showCheckBox()的函数，用Knockout.js编写。它根据紧接在其前面的下拉列表中所选项的值来确定是否应显示目标复选框。例如，如果下拉列表中所选项的值为1，则可以看到对应值为1的目标复选框。该功能如下所示：

function showCheckBox(span) {
   var value = span.firstChild.value;
   return value == reason();  
}

reason()是视图模型变量，它保存所选下拉列表项的值。无论我做什么，我都无法正确发送复选框的值。它始终未定义。

Answer 1

此HTML中的第一个孩子实际上是textNode，如果找到了firstChild将会返回"↵ "。这些是它返回的实际字符：function showCheckBox(span) { var value = span.firstElementChild.value; return value == reason(); }（返回和空格）。

您可以改为使用firstElementChild属性：

firstElementChild

另外，请不要忘记查看setVersion的支持表。

Answer 2

在考虑了一段时间之后，同事提出了这个解决方案。

不是将复选框的值指定为与下拉列表视图模型变量对应的ID，而是建议我在data-bind属性中指定它。在我的C＃代码隐藏文件中，看起来像这样

cb.Attributes.Add("data-bind", String.Format("visible: showCheckBox({0})", reasonDetails[i].ReasonForSendingNoticeID.ToString()));

在HTML

中显示时看起来像这样

<span data-bind="visible: showCheckBox(1)" style="display: none;">
<input id="" type="checkbox" 
name="ctl00$MainContent$SecondaryForm$ctl00" value="Outside Source">
<label for="" style="display: inline;">Outside Source</label>
</span>

然后我按如下方式更改了功能

function showCheckBox(id) {
    return id == reason();
}

这样做允许我们直接将值传递给函数，而不必传递元素或其子元素。

感谢您的帮助和建议。

Answer 3

问题是隐藏的，因为你很大一部分根本没有使用KnockoutJS 。您应该查看the KnockoutJS checked binding的文档。

很可能没有理由在视图模型中检查DOM，甚至没有理由检查那些处理可见性的。而是使用视图模型。你还没有发布一个完整的最小复制品，但这里应该或多或少看起来像：

＆＃13;

function ViewModel() {
  var self = this;
  
  self.reasons = [{id: 1, txt: "Main reason"}, {id: 2, txt: "Other reason"}];
  self.reason = ko.observable(self.reasons[0]);
  
  self.showCheckBox = ko.computed(function() {
    return self.reason().id === 1;
  });
  
  self.hasOutsideSource = ko.observable(false);
};

ko.applyBindings(new ViewModel());

＆＃13;

pre { font-family: consolas; background: smoke; border: 1px solid #ddd; padding: 5px; margin: 5px; }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="options: reasons, value: reason, optionsText: 'txt'"></select>

<span data-bind="visible: showCheckBox">
  <label> 
    <input data-bind="checked: hasOutsideSource" type="checkbox" name="ctl00$MainContent$SecondaryForm$ctl00" value="1">    
     Outside Source
  </label>
</span>

<hr>
This would be sent to your server / debug info:
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

＆＃13;

如果你不能采取上述方法，我强烈建议考虑跳过使用KnockoutJS，因为它可能会给你带来更多麻烦，如果你做了很多DOM，它会帮助你自己操纵。

如何将元素传递给javascript函数并访问第一个子元素

3 个答案: