fineui-start/src/modules/list/list.js

!(function() {
    /**
     * todo项列表
     *
     */
    var List = BI.inherit(BI.Widget, {

        props: {
            //  指定组件的className
            baseCls: "my-todolist-list",
            text: "正在进行"
        },

        render: function() {
            var self = this, o = this.options;
            return {
                type: "bi.vertical",
                items: [
                    {
                        el: {
                            type: "bi.vertical_adapt",
                            height: 40,
                            items: [
                                {
                                    type: "bi.label",
                                    cls: "my-todolist-list-text",
                                    textAlign: "left",
                                    text: o.text,
                                    width: 580
                                }, {
                                    type: "bi.center_adapt",
                                    cls: "my-todolist-list-count-container",
                                    width: 20,
                                    height: 20,
                                    items: [
                                        {
                                            el: {
                                                type: "bi.label",
                                                ref: function(_ref) {
                                                    self.count = _ref;
                                                },
                                                text: "0"
                                            }
                                        }
                                    ]
                                }
                            ]
                        }
                    }, {  // 用bi.vertical布局作为列表项的容器.
                        type: "bi.vertical",
                        vgap: 10,
                        ref: function(_ref) {
                            self.list = _ref;
                        },
                        items: this._createItems(o.items)
                    }
                ]
            };
        },

        _createItems: function(items) {
            var self = this;
            return BI.map(items, function(index, item) {
                return BI.extend(item, {
                    type: "bi.multi_select_item",  // 节点采用复选节点展示
                    selected: item.done,  // 已完成的todo项置为选中状态
                    disabled: item.done,  // 已完成的todo项置为灰化状态
                    listeners: [
                        {  // 为每个todo项添加"EVENT_CHANGE"事件监听,触发组件自身"EVENT_CHANGE"事件
                            eventName: "EVENT_CHANGE",
                            action: function(v) {
                                self.fireEvent("EVENT_CHANGE", v);
                            }
                        }
                    ]
                });
            });
        },

        _setCount: function(count) {
            this.count.setText(count);
        },

        populate: function(items) {
            this.list.populate(this._createItems(items));
            this._setCount(items.length);
        }
    });
    BI.shortcut("my.todolist.list", List);
})();