4

一点上下文：我正在创建一个向导，因此在您完成该步骤之前，该步骤的内容是隐藏的。我正在根据您在第一步中的输入动态创建表单的第二步，如下所示：

无隐藏，获取输入，显示输出

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();
                }
            }
        };

我已经在我的控制台中手动玩过，似乎隐藏和显示容器的实际行为以某种方式破坏了我的日期选择器。通过隐藏将包含日期选择器的元素，将元素放在该容器中，然后显示容器，我已经能够在不通过控制台敲除的情况下复制它。元素出现，但日期选择器不会触发。

以前有没有人处理过这个问题？有没有我无法找到的解决方法？

4

1 回答 1

1

没有阅读全文，但为什么不尝试先将字段添加到 DOM，然后附加日期选择器？

于 2013-01-04T08:50:57.700 回答