Pull request #3571: fix order demo

Merge in VISUAL/fineui from ~IMP/fineui_fui:master to master * commit '23c8c021020ff3cb376674192dd7fffee55d2c54': 修改说明 fix order demo
2 years ago · d3404c8e6e
1 changed files with 142 additions and 0 deletions
--- a/examples/watch-order.html
+++ b/examples/watch-order.html
@ -0,0 +1,142 @@
+<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 widget.**, 子组件watch了widget.arr, 修改widget中arr和dims的先后顺序不一样，会导致watch顺序不一样。'
+                }, {
+                    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());
+                this.model.widget.dims.push(BI.UUID());
+
+            },
+            addDimFirst: function () {
+                // 修改dim在前先执行 widget.** 再出发arr的watch
+                this.model.widget.dims.push(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>