forked from fanruan/fineui
Compare commits
10 Commits
Author | SHA1 | Date |
---|---|---|
data | 2e337a62c2 | 1 year ago |
imp-张健 | 0461002828 | 1 year ago |
jian | 9955e0bf74 | 1 year ago |
jian | d13829c552 | 1 year ago |
jian | 0ae51ec2dc | 1 year ago |
data | aaf2acb606 | 1 year ago |
imp-张健 | d3404c8e6e | 1 year ago |
jian | 23c8c02102 | 1 year ago |
jian | 419d31cb44 | 1 year ago |
jian | 84dae193cb | 1 year ago |
3 changed files with 143 additions and 3 deletions
@ -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> |
Loading…
Reference in new issue