Merge branch 'master' of dailer/FineUI-Start into master

.gitmodules

@@ -1,3 +1,3 @@
 [submodule "fineui"]
 	path = fineui
-url=https://git.coding.net/fanruan/fineui.git
+url=https://github.com/fanruan/fineui.git

README.md

@@ -1,8 +1,11 @@
 # FineUI-Start
 
 ## 安装运行
-`git clone --recursive http://git.fanruan.com/fanruan/FineUI-Start`
+`git clone --recursive https://git.fanruan.com/dailer/FineUI-Start.git`
 
 `npm install`
 
 `npm run grunt`
+
+## 示例效果
+![](./screenshorts/todolist.gif)

dist/bundle.js

@@ -1,18 +1,23 @@
 !(function() {
+    /**
+     * 顶部组件,提供输入框添加todo项目
+     * 布局: bi.horizontal_auto 实现水平居中. bi.left_right_vertical_adapt 实现标题是输入框的靠左靠右垂直居中
+     */
     var ToDoListHeader = BI.inherit(BI.Widget, {
 
         props: {
+            //  指定组件的className
             baseCls: "my-todolist-header"
         },
 
         render: function() {
             var self = this, o = this.options;
             return {
-                type: "bi.horizontal_auto",
+                type: "bi.horizontal_auto",  // 水平居中布局
                 items: [
                     {
                         el: {
-                            type: "bi.left_right_vertical_adapt",
+                            type: "bi.left_right_vertical_adapt",  //  左右垂直居中布局
                             width: 600,
                             height: o.height,
                             items: {
@@ -30,17 +35,21 @@
                                     {
                                         el: {
                                             type: "bi.editor",
+                                            ref: function(_ref) {
+                                                self.editor = _ref;
+                                            },
                                             allowBlank: true,
                                             cls: "my-todolist-header-editor",
                                             watermark: "添加ToDo",
                                             width: 300,
                                             height: 24,
                                             listeners: [
-                                                {
+                                                {  //  监听bi.editor 组件的"EVENT_ENTER"事件(即敲回车),触发事件ToDoListHeader.EVENT_ADD事件并将输入框值置空
                                                     eventName: "EVENT_ENTER",
                                                     action: function() {
+                                                        //  注意:在这里this指向的是bi.editor的实例.通过bi.editor的getValue()方法获取输入框输入值.
                                                         self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue());
-                                                        this.setValue("");
+                                                        self.editor.setValue("");
                                                     }
                                                 }
                                             ]
@@ -59,9 +68,14 @@
 
     BI.shortcut("my.todolist.header", ToDoListHeader);
 })();!(function() {
+    /**
+     * todo项列表
+     *
+     */
     var List = BI.inherit(BI.Widget, {
 
         props: {
+            //  指定组件的className
             baseCls: "my-todolist-list",
             text: "正在进行"
         },
@@ -101,33 +115,35 @@
                                 }
                             ]
                         }
-                    }, {
+                    }, {  // 用bi.vertical布局作为列表项的容器.
-                        type: "bi.button_group",
+                        type: "bi.vertical",
+                        vgap: 10,
                         ref: function(_ref) {
                             self.list = _ref;
                         },
-                        layouts: [
+                        items: this._createItems(o.items)
-                            {
-                                type: "bi.vertical",
-                                vgap: 10
                     }
-                        ],
+                ]
-                        items: 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);
                             }
                         }
                     ]
-                    }
+                });
-                ]
+            });
-            };
-        },
-
-        _createItems: function (items) {
-            return BI.createItems(items, this.options.el);
         },
 
         _setCount: function(count) {
@@ -141,38 +157,34 @@
     });
     BI.shortcut("my.todolist.list", List);
 })();!(function() {
+    /**
+     * todolist 组件
+     */
     var ToDoList = BI.inherit(BI.Widget, {
 
         props: {
             baseCls: "fine-to-do-list"
         },
 
-        _store: function () {
+        // 生命周期函数,在组件创建前
-            return BI.Models.getModel("my.model.todolist");
+        beforeCreate: function() {
-        },
+            //  初始化存储数据
-
+            this.list = localStorage.getItem("fine-todolist") ? JSON.parse(localStorage.getItem("fine-todolist")) : [];
-        watch: {
-            todoList: function (items) {
-                this.todolist.populate(items);
-            },
-            doneList: function (items) {
-                this.donelist.populate(items);
-            }
         },
 
         render: function() {
             var self = this, o = this.options;
             return {
-                type: "bi.vtape",
+                type: "bi.vtape",  // vtape布局,顶部高度固定,下部分列表占满高度
                 items: [
                     {
                         el: {
-                            type: "my.todolist.header",
+                            type: "my.todolist.header",  // 顶部组件
                             listeners: [
-                                {
+                                {  // 监听组件的EVENT_ADD事件,新建todo项
                                     eventName: "EVENT_ADD",
                                     action: function(v) {
-                                        self.store.addToDo(v);
+                                        self.addToDo(v);
                                     }
                                 }
                             ],
@@ -180,21 +192,22 @@
                         },
                         height: 40
                     }, {
-                        type: "bi.horizontal_auto",
+                        type: "bi.horizontal_auto",  // 水平居中布局
-                        cls: "bi-background",
+                        cls: "my-todolist-background",  // 添加className
                         items: [
                             {
                                 el: {
-                                    type: "my.todolist.list",
+                                    type: "my.todolist.list",  // need todo项列表
                                     ref: function(_ref) {
                                         self.todolist = _ref;
                                     },
+                                    items: this._getNeedTodoList(),
                                     text: "正在进行",
                                     listeners: [
-                                        {
+                                        {  // 监听EVENT_CHANGE事件,完成某一项todo
                                             eventName: "EVENT_CHANGE",
                                             action: function(v) {
-                                                self.store.finish(v);
+                                                self.finishTodo(v);
                                             }
                                         }
                                     ],
@@ -202,8 +215,9 @@
                                 }
                             }, {
                                 el: {
-                                    type: "my.todolist.list",
+                                    type: "my.todolist.list",  //  已经完成的todo项列表
                                     text: "已经完成",
+                                    items: this._getAlreadyDoneList(),
                                     ref: function(_ref) {
                                         self.donelist = _ref;
                                     },
@@ -214,67 +228,57 @@
                     }
                 ]
             };
-        }
+        },
-    });
-    BI.shortcut("my.todolist", ToDoList);
-})();
-!(function () {
-
-    var ToDoListModel = BI.inherit(Fix.Model, {
 
-        state: function () {
+        _updateLocalStorage: function() {
-            return {
+            localStorage.setItem("fine-todolist", JSON.stringify(this.list));
-                list: []
-            };
         },
-        watch: {},
 
-        computed: {
+        _getNeedTodoList: function() {
-            todoList: function () {
+            return BI.filter(this.list, function(index, item) {
-                var items = BI.filter(this.model.list, function (index, item) {
                 return !item.done;
             });
-                return BI.map(items, function (index, item) {
-                    return BI.extend({
-                        type: "bi.multi_select_item"
-                    }, item);
-                });
         },
-            doneList: function () {
+
-                var items = BI.filter(this.model.list, function (index, item) {
+        _getAlreadyDoneList: function() {
+            return BI.filter(this.list, function(index, item) {
                 return item.done;
             });
-                return BI.map(items, function (index, item) {
-                    return BI.extend({
-                        type: "bi.multi_select_item",
-                        selected: true,
-                        disabled: true
-                    }, item);
-                });
-            }
         },
 
-        actions: {
+        /**
-            addToDo: function (v) {
+         * 添加todo项
-                this.model.list.push({
+         * @param text todo项的内容
+         */
+        addToDo: function(text) {
+            this.list.push({
                 value: BI.UUID(),
-                    text: v,
+                text: text,
                 done: false
             });
+            this.todolist.populate(this._getNeedTodoList());
+            this._updateLocalStorage();
         },
 
-            finish: function (v) {
+        /**
-                BI.some(this.model.list, function (index, item) {
+         * 完成某一项todo
+         * @param v todo项的value
+         */
+        finishTodo: function(v) {
+            BI.some(this.list, function(index, item) {
                 if (item.value === v) {
                     item.done = true;
                 }
             });
-            }
+            this.todolist.populate(this._getNeedTodoList());
+            this.donelist.populate(this._getAlreadyDoneList());
+            this._updateLocalStorage();
         }
     });
-    BI.model("my.model.todolist", ToDoListModel);
+    BI.shortcut("my.todolist", ToDoList);
 })();
 !(function () {
+    // 将todolist组件挂载到#wrapper上.
     BI.createWidget({
         type: "my.todolist",
         element: "#wrapper"

index.html

@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <title>FineUI Admin</title>
+    <title>FineUI-Start</title>
     <!--核心css文件-->
     <link rel="stylesheet" type="text/css" href="fineui/dist/core.css"/>
     <!--基础css文件， 包含一些最基本控件的样式-->
@@ -11,7 +11,7 @@
     <!--BI控件样式-->
     <link rel="stylesheet" type="text/css" href="fineui/dist/widget.css"/>
     <!--资源样式， 包括font、icon、background、app-->
-    <!--<link rel="stylesheet" type="text/css" href="fineui/dist/resource.css"/>-->
+    <link rel="stylesheet" type="text/css" href="fineui/dist/resource.css"/>
 
     <link rel="stylesheet" type="text/css" href="dist/bundle.css"/>
 

src/css/header/header.css

@@ -1,3 +1,6 @@
+/**
+  列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
+ */
 .my-todolist-header {
   background-color: #3d4d66;
 }

src/css/list/list.css

@@ -1,3 +1,6 @@
+/**
+  列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius方法等.请选择性使用.不强制要求
+ */
 .my-todolist-list .my-todolist-list-text {
   font-size: 16px;
   font-weight: bold;

src/index.js

@@ -1,4 +1,5 @@
 !(function () {
+    // 将todolist组件挂载到#wrapper上.
     BI.createWidget({
         type: "my.todolist",
         element: "#wrapper"

src/modules/header/header.js

@@ -1,18 +1,23 @@
 !(function() {
+    /**
+     * 顶部组件,提供输入框添加todo项目
+     * 布局: bi.horizontal_auto 实现水平居中. bi.left_right_vertical_adapt 实现标题是输入框的靠左靠右垂直居中
+     */
     var ToDoListHeader = BI.inherit(BI.Widget, {
 
         props: {
+            //  指定组件的className
             baseCls: "my-todolist-header"
         },
 
         render: function() {
             var self = this, o = this.options;
             return {
-                type: "bi.horizontal_auto",
+                type: "bi.horizontal_auto",  // 水平居中布局
                 items: [
                     {
                         el: {
-                            type: "bi.left_right_vertical_adapt",
+                            type: "bi.left_right_vertical_adapt",  //  左右垂直居中布局
                             width: 600,
                             height: o.height,
                             items: {
@@ -30,17 +35,21 @@
                                     {
                                         el: {
                                             type: "bi.editor",
+                                            ref: function(_ref) {
+                                                self.editor = _ref;
+                                            },
                                             allowBlank: true,
                                             cls: "my-todolist-header-editor",
                                             watermark: "添加ToDo",
                                             width: 300,
                                             height: 24,
                                             listeners: [
-                                                {
+                                                {  //  监听bi.editor 组件的"EVENT_ENTER"事件(即敲回车),触发事件ToDoListHeader.EVENT_ADD事件并将输入框值置空
                                                     eventName: "EVENT_ENTER",
                                                     action: function() {
+                                                        //  注意:在这里this指向的是bi.editor的实例.通过bi.editor的getValue()方法获取输入框输入值.
                                                         self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue());
-                                                        this.setValue("");
+                                                        self.editor.setValue("");
                                                     }
                                                 }
                                             ]

src/modules/header/header.less

@@ -1,5 +1,7 @@
 @import "../../index.less";
-
+/**
+  列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
+ */
 .my-todolist-header {
   background-color: #3d4d66;
 

src/modules/list/list.js

@@ -1,7 +1,12 @@
 !(function() {
+    /**
+     * todo项列表
+     *
+     */
     var List = BI.inherit(BI.Widget, {
 
         props: {
+            //  指定组件的className
             baseCls: "my-todolist-list",
             text: "正在进行"
         },
@@ -41,33 +46,35 @@
                                 }
                             ]
                         }
-                    }, {
+                    }, {  // 用bi.vertical布局作为列表项的容器.
-                        type: "bi.button_group",
+                        type: "bi.vertical",
+                        vgap: 10,
                         ref: function(_ref) {
                             self.list = _ref;
                         },
-                        layouts: [
+                        items: this._createItems(o.items)
-                            {
-                                type: "bi.vertical",
-                                vgap: 10
                     }
-                        ],
+                ]
-                        items: 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);
                             }
                         }
                     ]
-                    }
+                });
-                ]
+            });
-            };
-        },
-
-        _createItems: function (items) {
-            return BI.createItems(items, this.options.el);
         },
 
         _setCount: function(count) {

src/modules/list/list.less

@@ -1,5 +1,7 @@
 @import "../../index.less";
-
+/**
+  列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius方法等.请选择性使用.不强制要求
+ */
 .my-todolist-list {
   .my-todolist-list-text {
     font-size: @font-size-16;

src/modules/main.js

@@ -1,36 +1,32 @@
 !(function() {
+    /**
+     * todolist 组件
+     */
     var ToDoList = BI.inherit(BI.Widget, {
 
         props: {
             baseCls: "fine-to-do-list"
         },
 
-        _store: function () {
+        // 生命周期函数,在组件创建前
-            return BI.Models.getModel("my.model.todolist");
+        beforeCreate: function() {
-        },
+            //  初始化存储数据
-
+            this.list = localStorage.getItem("fine-todolist") ? JSON.parse(localStorage.getItem("fine-todolist")) : [];
-        watch: {
-            todoList: function (items) {
-                this.todolist.populate(items);
-            },
-            doneList: function (items) {
-                this.donelist.populate(items);
-            }
         },
 
         render: function() {
             var self = this, o = this.options;
             return {
-                type: "bi.vtape",
+                type: "bi.vtape",  // vtape布局,顶部高度固定,下部分列表占满高度
                 items: [
                     {
                         el: {
-                            type: "my.todolist.header",
+                            type: "my.todolist.header",  // 顶部组件
                             listeners: [
-                                {
+                                {  // 监听组件的EVENT_ADD事件,新建todo项
                                     eventName: "EVENT_ADD",
                                     action: function(v) {
-                                        self.store.addToDo(v);
+                                        self.addToDo(v);
                                     }
                                 }
                             ],
@@ -38,21 +34,22 @@
                         },
                         height: 40
                     }, {
-                        type: "bi.horizontal_auto",
+                        type: "bi.horizontal_auto",  // 水平居中布局
-                        cls: "bi-background",
+                        cls: "my-todolist-background",  // 添加className
                         items: [
                             {
                                 el: {
-                                    type: "my.todolist.list",
+                                    type: "my.todolist.list",  // need todo项列表
                                     ref: function(_ref) {
                                         self.todolist = _ref;
                                     },
+                                    items: this._getNeedTodoList(),
                                     text: "正在进行",
                                     listeners: [
-                                        {
+                                        {  // 监听EVENT_CHANGE事件,完成某一项todo
                                             eventName: "EVENT_CHANGE",
                                             action: function(v) {
-                                                self.store.finish(v);
+                                                self.finishTodo(v);
                                             }
                                         }
                                     ],
@@ -60,8 +57,9 @@
                                 }
                             }, {
                                 el: {
-                                    type: "my.todolist.list",
+                                    type: "my.todolist.list",  //  已经完成的todo项列表
                                     text: "已经完成",
+                                    items: this._getAlreadyDoneList(),
                                     ref: function(_ref) {
                                         self.donelist = _ref;
                                     },
@@ -72,6 +70,51 @@
                     }
                 ]
             };
+        },
+
+        _updateLocalStorage: function() {
+            localStorage.setItem("fine-todolist", JSON.stringify(this.list));
+        },
+
+        _getNeedTodoList: function() {
+            return BI.filter(this.list, function(index, item) {
+                return !item.done;
+            });
+        },
+
+        _getAlreadyDoneList: function() {
+            return BI.filter(this.list, function(index, item) {
+                return item.done;
+            });
+        },
+
+        /**
+         * 添加todo项
+         * @param text todo项的内容
+         */
+        addToDo: function(text) {
+            this.list.push({
+                value: BI.UUID(),
+                text: text,
+                done: false
+            });
+            this.todolist.populate(this._getNeedTodoList());
+            this._updateLocalStorage();
+        },
+
+        /**
+         * 完成某一项todo
+         * @param v todo项的value
+         */
+        finishTodo: function(v) {
+            BI.some(this.list, function(index, item) {
+                if (item.value === v) {
+                    item.done = true;
+                }
+            });
+            this.todolist.populate(this._getNeedTodoList());
+            this.donelist.populate(this._getAlreadyDoneList());
+            this._updateLocalStorage();
         }
     });
     BI.shortcut("my.todolist", ToDoList);

src/modules/main.less

@@ -0,0 +1,6 @@
+/**
+  列表项的less,其中用到了部分FineUI提供的字号,颜色常量,还有border-radius,box-shadow方法等.请选择性使用.不强制要求
+ */
+.my-todolist-background {
+  background-color: #f7f8fa;
+}

src/modules/main.model.js

@@ -1,56 +0,0 @@
-!(function () {
-
-    var ToDoListModel = BI.inherit(Fix.Model, {
-
-        state: function () {
-            return {
-                list: []
-            };
-        },
-        watch: {},
-
-        computed: {
-            todoList: function () {
-                var items = BI.filter(this.model.list, function (index, item) {
-                    return !item.done;
-                });
-                return BI.map(items, function (index, item) {
-                    return BI.extend({
-                        type: "bi.multi_select_item"
-                    }, item);
-                });
-            },
-            doneList: function () {
-                var items = BI.filter(this.model.list, function (index, item) {
-                    return item.done;
-                });
-                return BI.map(items, function (index, item) {
-                    return BI.extend({
-                        type: "bi.multi_select_item",
-                        selected: true,
-                        disabled: true
-                    }, item);
-                });
-            }
-        },
-
-        actions: {
-            addToDo: function (v) {
-                this.model.list.push({
-                    value: BI.UUID(),
-                    text: v,
-                    done: false
-                });
-            },
-
-            finish: function (v) {
-                BI.some(this.model.list, function (index, item) {
-                    if (item.value === v) {
-                        item.done = true;
-                    }
-                });
-            }
-        }
-    });
-    BI.model("my.model.todolist", ToDoListModel);
-})();