<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>