From 84dae193cbfb2359371ceea487533f13fdb790f5 Mon Sep 17 00:00:00 2001
From: jian <imp@fanruan.com>
Date: Thu, 1 Jun 2023 11:28:11 +0800
Subject: [PATCH] fix order demo

---
 examples/watch-order.html | 138 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 examples/watch-order.html
diff --git a/examples/watch-order.html b/examples/watch-order.html
new file mode 100644
index 000000000..3f437939d
--- /dev/null
+++ 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>
