一点上下文：我正在创建一个向导，因此在您完成该步骤之前，该步骤的内容是隐藏的。我正在根据您在第一步中的输入动态创建表单的第二步，如下所示：
无隐藏，获取输入，显示输出
HTML
<p class="par">
<label for="report_cat">Category:</label>
<span class="field">
<select data-bind="options: reportTypes, optionsText: 'title', value: selectedReportType, optionsCaption: 'Report Category'" id="report_cat" class="longinput"></select>
</span>
</p>
<p class="par">
<label for="report">Report:</label>
<span class="field">
<select data-bind="options: reportPool, optionsText: 'title', value: selectedReport, optionsCaption: 'Select Report'" id="report" class="longinput"></select>
</span>
</p>
<div class="widgetcontent stdform stdform2 stdformwidget" id="tmptest" data-bind="wizardInputs: inputPool">
</div>
相关 Javascript（ReportTypes 只是一个 javascript 对象数组）
self.inputPool = ko.computed(function() {
if (self.selectedReport() == null) return [];
//set the url
self.postUrl(self.selectedReport().postUrl);
var inputs = self.selectedReport().inputs.map(function(elem) {
var element = null;
var type = elem["type"];
var id = "wizard-elem-" + elem["title"].replace(/\s+/g, '');
if (type == "date") {
element = $("<input type =\"text\" id=\"" + id + "\" class=\"longinput wizard-dp\" style=\"display:inline-block\" />");
element.datepicker();
}
if (type == "checkbox") {
element = $("<input type =\"checkbox\" id=\"" + id + "\" />");
}
if (type == "select") {
//do something with options
element = $("<input type =\"checkbox\" id=\"" + id + "\" />");
}
elem["elem"] = element;
return elem;
});
return inputs;
});
ko.bindingHandlers.wizardInputs = {
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var ele = $(element);
var value = valueAccessor();
ele.children(".wizardContent").remove();
var container = $("<div class=\"wizardContent\"></div>");
for (var x in value()) {
var single = value()[x];
var id = "wizard-elem-final-" + single["title"].replace(/\s+/g, '');
var param = $("<p></p>").addClass("par");
param.append("<label for=\"" + id + "\">" + single["title"] + "</label>");
var field = $("<span></span>").addClass("field");
field.append(single["elem"]);
param.append(field);
container.append(param);
}
if (value().length > 0) {
ele.prepend(container);
}
}
};
我把所有的代码都扔在了这个小提琴上，我在任何时候都没有隐藏我的元素。当您选择任何类别/报告的组合时，第二步将自动弹出在第一步下方。日期选择器（输入 1）会显示得很好（暂时忽略缺少 CSS）。
但是，当我试图通过隐藏和显示容器来让每个步骤在适当的时间出现时，日期选择器将不会出现。实际的输入元素有“hasDatePicker”类，所以我知道日期选择器仍在实现中。实际隐藏的 datepicker 元素也会显示在 Firebug 的 HTML 查看器中；所以我知道它在那里。
隐藏
HTML
<div class="widgetcontent stdform stdform2 stdformwidget" data-bind="slideVisible: (step() == 1)" id="tmptest1">
<p class="par">
<label for="report_name">Title:</label>
<span class="field">
<input type="text" data-bind="value: title" class="longinput" id="report_name" />
</span>
</p>
<p class="par">
<label for="report_cat">Category:</label>
<span class="field">
<select data-bind="options: reportTypes, optionsText: 'title', value: selectedReportType, optionsCaption: 'Report Category'" id="report_cat" class="longinput"></select>
</span>
</p>
<p class="par">
<label for="report">Report:</label>
<span class="field">
<select data-bind="options: reportPool, optionsText: 'title', value: selectedReport, optionsCaption: 'Select Report'" id="report" class="longinput"></select>
</span>
</p>
</div>
<div class="widgetcontent stdform stdform2 stdformwidget" id="tmptest" data-bind="wizardInputs: inputPool, slideVisible: (step() == 2)">
</div>
SlideVisible 绑定
ko.bindingHandlers.slideVisible = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var ele = $(element);
var value = ko.utils.unwrapObservable(valueAccessor());
ele.hide();
if (value) ele.slideDown();
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var ele = $(element);
var value = ko.utils.unwrapObservable(valueAccessor());
if (value) {
ele.slideDown();
}
else {
ele.slideUp();
}
}
};
我已经在我的控制台中手动玩过，似乎隐藏和显示容器的实际行为以某种方式破坏了我的日期选择器。通过隐藏将包含日期选择器的元素，将元素放在该容器中，然后显示容器，我已经能够在不通过控制台敲除的情况下复制它。元素出现，但日期选择器不会触发。
以前有没有人处理过这个问题？有没有我无法找到的解决方法？