Method create_element

webiojs/src/handlers/input.ts:155–281

()

    create_element(): JQuery {
        let tpl = `
            <div class="card" style="display: none">
                <h5 class="card-header">{{label}}</h5>
                <div class="card-body">
                    <form>
                        <div class="input-container"></div>
                        <div class="ws-form-submit-btns">
                            <button type="submit" class="btn btn-primary">${t("submit")}</button>
                            <button type="reset" class="btn btn-warning">${t("reset")}</button>
                            {{#cancelable}}<button type="button" class="pywebio_cancel_btn btn btn-danger">${t("cancel")}</button>{{/cancelable}}
                        </div>
                    </form>
                </div>
            </div>`;
        let that = this;

        const html = Mustache.render(tpl, {label: this.spec.label, cancelable: this.spec.cancelable});
        let element = $(html);

        element.find('.pywebio_cancel_btn').on('click', function (e) {
            element.find('button').prop("disabled", true);
            that.session.send_message({
                event: "from_cancel",
                task_id: that.task_id,
                data: null
            });
        });

        // 隐藏默认的"提交"/"重置"按钮
        if (this.spec.inputs.length && this.spec.inputs[this.spec.inputs.length - 1].type === 'actions') {
            for (let btn of this.spec.inputs[this.spec.inputs.length - 1].buttons) {
                if (btn.type === 'submit') {
                    element.find('.ws-form-submit-btns').hide();
                    break;
                }
            }
        }

        // 输入控件创建
        let body = element.find('.input-container');
        for (let idx in this.spec.inputs) {
            let input_spec = this.spec.inputs[idx];
            if (!(input_spec.type in FormController.input_items))
                throw new Error(`Unknown input type '${input_spec.type}'`);
            let item_class = FormController.input_items[input_spec.type];
            let item = new item_class(input_spec, this.task_id, (event, input_item) => {
                this.session.send_message({
                    event: "input_event",
                    task_id: this.task_id,
                    data: {
                        event_name: event,
                        name: input_spec.name,
                        value: input_item.get_value()
                    }
                });
            });
            this.name2input[input_spec.name] = item;