4

ちょっとしたコンテキスト：私はウィザードを作成しているので、ステップの内容は、そのステップに到達するまで非表示になります。次のように、最初のステップからの入力に基づいて、フォームの2番目のステップを動的に作成しています。

非表示なし、入力の取得、出力の表示

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

}
};

私はこのフィドルのすべてのコードを投げました、私はどの時点でも私の要素を隠していません。カテゴリ/レポートの任意の組み合わせを選択すると、2番目のステップが最初のステップの下に自動的にポップアップ表示されます。日付ピッカー（入力1）は問題なく表示されます（CSSの欠如はしばらく無視してください）。

ただし、コンテナを非表示にして表示することにより、各ステップを適切なタイミングで表示しようとすると、日付ピッカーが表示されません。実際の入力要素には「hasDatePicker」クラスがあるので、datepickerがまだ実装されていることがわかります。非表示になっている実際の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();
                }
            }
        };

私は手動でコンソールをいじってみましたが、コンテナを隠して表示するという実際の行為は、どういうわけか私の日付ピッカーを壊しているようです。日付ピッカーを含む要素を非表示にし、そのコンテナーに要素を配置してからコンテナーを表示することにより、コンソールを介してノックアウトせずにこれを複製することができました。要素は表示されますが、datepickerは処理されません。

誰かがこれに以前に対処したことがありますか？単に見つけることができなかった回避策はありますか？

4

1 に答える 1

1

すべてを読んだわけではありませんが、最初にフィールドをDOMに追加してから、日付ピッカーを添付してみませんか？

于 2013-01-04T08:50:57.700 に答える