KnockoutJS - 渲染嵌套 observableArray UI 后 UI 未触发 onchange 事件答案

【问题标题】：KnockoutJS - UI not firing onchange event after nested observableArray UI is renderedKnockoutJS - 渲染嵌套 observableArray UI 后 UI 未触发 onchange 事件
【发布时间】：2013-03-29 10:50:24
【问题描述】：

我目前可以正常运行，下拉列表选择更改将显示一些文本，同时隐藏另一段文本。

下拉列表值更改时触发的javascript：

window.DropdownValueChange = function(event) {
var jqueryValue = $(event);
jqueryValue.closest('td').find('p').hide();

var className = '.' + event.options[event.selectedIndex].value + '-class';
jqueryValue.closest('td').find(className).show();
}

HTML 对象已更改：

<p class="male-class">I am a male</p>
<p class="female-class">I am a female</p>

但是，最初呈现 HTML 时并非如此。为什么在加载 UI 时 onchange 函数没有正确触发？

http://jsfiddle.net/djcanseco/duL72/49/

【问题讨论】：

标签： knockout.js

【解决方案1】：

您的 onchange 没有在页面加载时触发。这可以通过向<p> 标签添加可视数据绑定来解决：

 <p class="male-class" data-bind="visible: gender == 'male'">
    I am a male
 </p>
 <p class="female-class" data-bind="visible: gender == 'female'">
    I am a female
 </p>

更新fiddle

【讨论】：

我试图删除下拉列表中的 onchange 事件处理程序，认为可见部分将处理 UI 更改，但它不起作用。我不认为视图模型中的值正在改变，我是否认为控件的工作方式与它应该的不同。
想通了，看起来我用 JS 对象加载了 observableArray，因为在初始加载后性别值无法正确地从视图模型中拉出，所以它们没有正确网格化。我将数据绑定改为"visible: gender() == 'male'"。感谢@Jesse 为我指明了正确的方向！