fix order demo

2 years ago · 84dae193cb
1 changed files with 138 additions and 0 deletions
--- a/examples/watch-order.html
+++ b/examples/watch-order.html
@ -0,0 +1,138 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/>
+    <script src="../dist/2.0/fineui.js"></script> -->
+    <link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css"/>
+    <script src="http://localhost:9001/fineui.js"></script>
+</head>
+<body>
+<div id="wrapper"></div>
+<script>
+    var ParentModel = BI.inherit(BI.Model, {
+        state: function () {
+            return {
+                widget: {
+                    name: "触发arr和dims变化",
+                    arr: [],
+                    dims: {},
+                }
+            };
+        },
+        watch: {
+            'widget.**': function () {
+                console.log(Math.random().toFixed(3) + ': widget.** changed');
+            }
+        },
+
+        childContext: ["widget"],
+
+    });
+    BI.model("demo.model.parent", ParentModel);
+
+    var Parent = BI.inherit(BI.Widget, {
+
+        _store: function () {
+            return BI.Models.getModel('demo.model.parent');
+        },
+
+        render: function () {
+            return {
+                type: "bi.vertical",
+                bgap: 10,
+                items: [{
+                    type: 'bi.label',
+                    text: '不应该在watch一个属性后再去修改属性，应该一次性改好，或者同步watch去做'
+                }, {
+                    type: 'demo.child'
+                }],
+                text: function () {
+                    return this.model.name;
+                }
+            };
+        }
+    });
+    BI.shortcut("demo.parent", Parent);
+
+    var ChildModel = BI.inherit(BI.Model, {
+
+        context: ["widget"],
+
+        watch: {
+            arr: {
+                handler: function () {
+                    console.log(Math.random().toFixed(3) + ': arr changed');
+                },
+                sync: false // 改成true 同步watch 修改也行
+            }
+        },
+
+        computed: {
+            arr: function () {
+                return this.model.widget.arr;
+            },
+            dims: function () {
+                return this.model.widget.dims;
+            }
+        },
+
+        actions: {
+            addArrFirst: function () {
+                // 修改arr在前，先触发arr的watch 再触发widget.**的监听
+                this.model.widget.arr.push(BI.UUID());
+                Fix.set(this.model.widget.dims, BI.UUID(), {});
+            },
+            addDimFirst: function () {
+                // 修改dim在前先执行 widget.** 再出发arr的watch
+                Fix.set(this.model.widget.dims, BI.UUID(), {});
+                this.model.widget.arr.push(BI.UUID());
+            }
+        }
+    });
+    BI.model("demo.model.child", ChildModel);
+
+    var Child = BI.inherit(BI.Widget, {
+
+        _store: function () {
+            return BI.Models.getModel('demo.model.child');
+        },
+
+        render: function () {
+            var self = this;
+            return {
+                type: 'bi.left',
+                rgap: 20,
+                items: [{
+                    type: "bi.button",
+                    text: '先修改widget.arr',
+                    handler: function () {
+                        self.store.addArrFirst();
+                    }
+                }, {
+                    type: "bi.button",
+                    text: '先修改widget.dims',
+                    handler: function () {
+                        self.store.addDimFirst();
+                    }
+                }]
+            };
+        }
+    });
+    BI.shortcut("demo.child", Child);
+
+
+    BI.createWidget({
+        type: "bi.absolute",
+        items: [{
+            el: {
+                type: "demo.parent"
+            },
+            top: 100,
+            left: 100
+        }],
+        element: "#wrapper"
+    });
+</script>
+</body>
+</html>