bui.store Class
Constructor
bui.store
-
[option]
Parameters:
-
[option]Object optional-
[el]String optional最外层的选择器, 默认: ".bui-page"
-
scopeString[数据的范围唯一标识, 比方公共数据可以用app, 模块的数据可以用page 或者其它自定义名称]
-
[isPublic]Boolean optional是否作为公共数据, 默认: false ( 在模块里面使用) | true (在index.js 路由初始化以后使用)
-
[needStatic]Boolean optional解析{{page.title}}, 默认 false | true ，1.8.3 以上会动态变更 1.8.3以下，只渲染一次
-
[needCompile]Boolean optional1.5.1 默认编译对应的解析器
-
[data]Object optional动态监听的对象,当变更会自动触发相关联的选择器,需要提前定义
-
[computed]Object optional需要动态计算改变的相关联的时候,例如 fullName ,依赖于 data.firstName,data.lastName
-
[watch]Object optional监听的数据字段,在数据改变的时候,做对应的其它事情
-
[methods]Object optional定义的方法,便于拿取相关数据
-
[mixins]Array optional1.6.0新增 一个数组, 里面每个对象,都是一个单独组件,在当前实例合并,便于业务划分 {data:{},templates:{},methods:{},mounted:function(){}...} 参数跟store基本一致, 并且配合 view 标签,可以分模板处理
-
[needComponent]Boolean optional1.6.0 新增 是否解析component标签, 默认 false(不解析) | true , 单页会由路由去解析
-
[templates]Object optional定义的模板方法
-
[beforeMount]Function optional数据解析前处理
-
[beforeCompile]Function optional1.5.3 新增 模板解析前处理
-
[compiled]Function optional1.5.3 新增 模板解析后处理
-
[mounted]Function optional数据解析完成以后处理
-
[modelEvent]String optional默认: "input" | "change"
-
Example:
var bs = bui.store({
scope: "app",
data: {
size: 1
}
});
// 这样就会设置内容为1
<b b-text="app.size"></b>
// 设置以后就会触发dom 的变更
bs.size = 2;
Item Index
Methods
Methods
$mount
-
el
[$mount 跟 compile方法一致，这里多一个保持vue的写法，解析模板里面的数据选择器, 一般是 needCompile: false 才需要手动调用, 或者是TAB异步加载的公共数据]
Parameters:
-
elString[选择器]
Example:
// 重新解析
bs.$mount(".bui-page")clearKey
()
chainable
清除键值的访问
Example:
bs.clearKey()
compileHtml
-
el
[解析模板里面的{{}}, 通过这种方式的设置,值不会动态变更]
Parameters:
-
elString[选择器]
Example:
// 解析模板里面的{{}}
var html = bs.compileHtml("<div title="{{app.name}}">{{app.name}}</div>");
connect
-
name -
[field] -
[targetField] -
[bool]
把两个不同的 bui.store 创建的实例里面data相同字段关联起来, 一般用于把父组件的参数同步给子组件
Parameters:
-
nameObject[ store 的实例 ]
-
[field]String optional指定关联哪个字段 , 可以支持 "xxx.xxxx" 指定对象里面的字段
-
[targetField]String optional指定目标name的哪个关联字段, 默认不需要,根据field相同字段即可, 如果为 "" 空字符串,则关联到该对象data上
-
[bool]Boolean optional默认true, 自动同步数据一次
Example:
// html
<h3>关联1: 关联相同字段</h3>
<input b-model="page.attrs.test" placeholder="" type="text">
<div class="scope1">
<input b-model="page1.attrs.test" placeholder="" type="text">
</div>
<h3>关联2: 关联到不同字段</h3>
<input b-model="page.attrs.test" placeholder="" type="text">
<div class="scope1">
<input b-model="page1.props.test" placeholder="" type="text">
</div>
<h3>关联3: 关联到根路径</h3>
<input b-model="page.attrs.test" placeholder="" type="text">
<div class="scope1">
<input b-model="page1.test" placeholder="" type="text">
</div>
// 可以在路由init以后,作为整个应用的联动数据处理
var bs = bui.store({
scope: "page", // 用于区分公共数据及当前数据的唯一值
data: {
attrs: {
"test": "123",
}
},
methods: {},
watch: {},
computed: {},
templates: {},
mounted: function() {
}
})
var bs2 = bui.store({
el: ".scope1",
scope: "page1", // 用于区分公共数据及当前数据的唯一值
data: {
attrs: {
test: "111"
},
props: {
test: "111"
},
test: "111"
},
methods: {},
watch: {},
computed: {},
templates: {},
mounted: function() {
}
})
// 关联1: 关联多个相同字段
bs.connect(bs2);
// 关联2: 关联到不同字段
// bs.connect(bs2, "attrs", "props");
// 关联3: 关联到根路径
// bs.connect(bs2, "attrs", "");
// 关联4: 关联指定字段
// bs.connect(bs2, "attrs.test");
delete
-
[name]
删除数据.并触发事件
Parameters:
-
[name]String optional存储数据在哪个键值,对象则存储多个
Example:
方法1:
var page = bs.delete("size");
// { size: 1}
方法2: 指定字段层级
var page = bs.delete("size.num");
destroy
()
chainable
销毁实例，不再支持双向绑定
Example:
bs.destroy()
disconnect
-
[field]
取消两个实例之间的关联字段.
Parameters:
-
[field]String optional指定关联哪个字段 , 可以支持 "xxx.xxxx" 指定对象里面的字段
Example:
var bs = bui.store({
el:"",
scope:"",
data: {
test: "2222"
}
})
// 取消关联test字段, 不传则是取消所有关联的相同字段. 下次改变就不会触发bs2.test变更.
bs.disconect("test");
get
-
[name]
获取数据
Parameters:
-
[name]String optional取哪个键值的数据,不传则取全部
Example:
var page = bs.get("size");
nextTick
-
callback
[ 监听模板的数据字段,在dom每次更新以后都会处理回调,多次调用会有多个处理的"nexttick"回调 ]
Parameters:
-
callbackFunction[ 回调, 数据更新以后的在这个回调里面的方法再进行执行 ]
Example:
// 监听a变量变更的时候,触发回调
bs.nextTick(function () {
// 执行控件的初始化
})off
-
[name] -
[callback]
取消监听某个数据
Parameters:
-
[name]String optional数据的字段为事件名
-
[callback]Function optional回调名,需跟原本绑定的为同一个方法才能取消
Example:
var log = function(val){
console.log(val) // 2
}
// 监听 page 改变的时候触发
bs.on("size",log)
// 取消
bs.off("page",log)
// 修改 page 数据
bs.set("page",2);
on
-
[name] -
[callback]
监听数据的修改, on事件监听必须在 set 数据修改之前.
Parameters:
-
[name]String optional数据的字段为事件名
-
[callback]Function optional数据修改以后的回调
Example:
// 监听 size 改变的时候触发
bs.on("size",function(val){
console.log(val) // 2
})
// 监听 size 下 name 改变的时候触发
bs.on("size.num",function(val){
console.log(val) // 3
})
// 修改 size 数据
bs.set("size",2);
// 修改 size.num 数据
bs.set("size.num",3);
one
-
[name] -
[callback]
监听数据的修改, 只监听一次, one事件监听必须在 set 数据修改之前.
Parameters:
-
[name]String optional数据的字段为事件名
-
[callback]Function optional数据修改以后的回调
Example:
// 监听 page 改变的时候触发
bs.one("page",function(val){
console.log(val) // 2
})
// 监听 page 下 name 改变的时候触发
bs.one("page.name",function(val){
console.log(val) // 3
})
// 修改 page 数据
bs.set("page",2);
// 修改 page.name 数据
bs.set("page.name",3);
oneTick
-
keyname -
callback
[只在某个keyname的数据更新,触发dom更新以后再处理回调,并且只监听一次,调用一次 ]
Parameters:
-
keynameString[ 监听某个值更新的时候触发一次 ]
-
callbackFunction[ 回调, 数据更新以后的在这个回调里面的方法再进行执行 ]
Example:
// 监听a变量变更的时候,触发回调, 当模板上有多个size数据的时候, 会触发多次.
bs.oneTick("size",function () {
// 执行控件的初始化
})
// 相同键值 size ,以第一个为主, 以下函数不会执行.
bs.oneTick("size",function () {
// 执行控件的初始化
})set
-
[name] -
[value]
保存数据,并会触发 通过 bs.on 监听的事件. 1.6.6有 setState 代替。
Parameters:
-
[name]String optional存储数据在哪个键值,对象则存储多个
-
[value]String | Object | Array optional存值
Example:
方法1:
var page = bs.setState("size",1);
// { size: 1}
会触发以下dom的变更
<b b-text="page.size"></b>
方法2: 指定字段层级
var page = bs.setState("size.num",1);
// { size: { num: 1 }}
会触发以下dom的变更
<b b-text="page.size.num"></b>
setState
-
[name] -
[value]
修改，替换
Parameters:
-
[name]String optional存储数据在哪个键值,对象则存储多个，如果是 $data 则替换整个$data
-
[value]String | Object | Array optional存值
Example:
方法1:
var page = bs.setState("size",1);
// { size: 1}
会触发以下dom的变更
<b b-text="page.size"></b>
方法2: 指定字段层级
var page = bs.setState("size.num",1);
// { size: { name: 1 }}
会触发以下dom的变更
<b b-text="page.size.num"></b>
方法3: 1.6.7 修改根data数据
var page = bs.setState("$data",{ size: 111});
<b b-text="page.size"></b>
trigger
-
[name]
手动触发
Parameters:
-
[name]String optional数据的字段为事件名
Example:
// 触发 2 为传过去的参数
bs.trigger("page","2")
watch
-
keyname -
callback
[ watch方法跟选项的watch 表现一致,数据更新的时候执行, 还没到dom更新,这个主要是为了分离式监听]
Parameters:
-
keynameString[ 这个的值是 data 选项里面的值, 监听该值改变的时候, 触发这里的回调. ]
-
callbackFunction[ 回调, 回调里面的参数可以拿到新值跟上一个值 ]
Example:
// 监听a变量变更的时候,触发回调
var unwatcha = bs.watch("a",function (newVal,oldVal) {
console.log(newVal);
console.log(oldVal);
})
1.6.2 新增 取消指定监听
unwatcha();