FineUI-100-Questions/questions/43.利用响应式编写组件代码的新思路.md

有了响应式,我们在开发组件的时候也可以体验到数据双向绑定.省去了进行状态控制需要额外定义store的流程

类似于Fix.Model, 我们约定state属性用来保存状态,在beforeCreate生命周期中定义.

const Pager = BI.inherit(BI.Widget, {
    props: {
        total: 1,
        page: 1,
    },

    beforeCreate: function () {
        this.state = Fix.define({
            currentPage: this.options.page,
            total: this.options.total,
        });
    },

    render: function () {

        return {
            type: "bi.vertical_adapt",
            columnSize: [24, 24, "fill", "", 24, 24],
            hgap: 5,
            items: [
                {
                    type: "bi.icon_button",
                    cls: "pre-page-h-font",
                    disabled: () => {
                        return this.state.currentPage === 1;
                    },
                    handler: () => {
                        this.state.currentPage = 1;
                        this.fireEvent("EVENT_CHANGE", this.getValue());
                    },
                }, {
                    type: "bi.icon_button",
                    cls: "pre-page-h-font",
                    disabled: () => {
                        return this.state.currentPage === 1;
                    },
                    handler: () => {
                        this.state.currentPage--;
                        this.fireEvent("EVENT_CHANGE", this.getValue());
                    },
                }, {
                    type: "bi.text_editor",
                    ref: ref => this.editor = ref,
                    value: () => this.state.currentPage,
                    validationChecker: (v) => (BI.parseInt(v) >= 1) && (BI.parseInt(v) <= this.state.total),
                    errorText: "error",
                    listeners: [
                        {
                            eventName: "EVENT_CHANGE",
                            action: () => {
                                this.state.currentPage = BI.parseInt(this.editor.getValue());
                                this.fireEvent("EVENT_CHANGE", this.getValue());
                            },
                        },
                    ],
                }, {
                    type: "bi.label",
                    text: () => "/" + this.state.total,
                }, {
                    type: "bi.icon_button",
                    cls: "next-page-h-font",
                    disabled: () => {
                        return this.state.currentPage === this.state.total;
                    },
                    handler: () => {
                        this.state.currentPage++;
                        this.fireEvent("EVENT_CHANGE", this.getValue());
                    },
                }, {
                    type: "bi.icon_button",
                    cls: "next-page-h-font",
                    disabled: () => {
                        return this.state.currentPage === this.state.total;
                    },
                    handler: () => {
                        this.state.currentPage = this.state.total;
                        this.fireEvent("EVENT_CHANGE", this.getValue());
                    },
                },
            ],
        };
    },

    getValue: function () {
        return this.state.currentPage;
    },

    populate: function () {
        this.state.currentPage = this.options.page;
        this.state.total = this.options.total;
    },
});

BI.shortcut("pager", Pager);

let pager;

BI.createWidget({
    type: "bi.vertical",
    vgap: 20,
    items: [
        {
            type: "pager",
            ref: ref => pager = ref,
            height: 24,
            width: 250,
            total: 100,
            page: 2,
        }, {
            type: "bi.button",
            text: "populate",
            handler: () => {
                pager.attr("total", 500);
                pager.attr("page", 400);
                pager.populate();
            },
        },
    ],
});

如果使用的是es6或者typescript开发,那么可以直接定义类的state属性

import { shortcut } from "@core";

@shortcut()
export class Steps extends BI.Widget {

    static xtype = "steps";

    props = {
        current: 1,
    };

    state = Fix.define({
        current: 1,
    });

    beforeCreate() {
        this.state.current = this.options.current;
    }

    render() {
        return {
            type: "bi.label",
            text: () => `第${this.state.current}步`,
        };
    }

    setValue(step) {
        return this.state.current = step;
    }

    getValue() {
        return this.state.current;
    }
}