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[1.5.1 静态解析{{page.title}}, 默认 false | true, 注意: isPublic:true 以后, needStatic不能为true, 在index.js把store挂载到路由,才能解析{{}}, ]
-
[needCompile]Boolean optional[1.5.1 默认编译对应的解析器 ]
-
[data]Object optional[动态监听的对象,当变更会自动触发相关联的选择器,需要提前定义]
-
[computed]Object optional[需要动态计算改变的相关联的时候,例如 fullName ,依赖于 data.firstName,data.lastName]
-
[watch]Object optional[监听的数据字段,在数据改变的时候,做对应的其它事情]
-
[methods]Object optional[定义的方法,便于拿取相关数据]
-
[templates]Object optional[定义的模板方法]
-
[beforeMount]Function optional[数据解析前处理]
-
[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
$children
()
[$children 返回当前 el选项的缓存子集, 子集新增删除这个值还是不会改变]
Example:
//
console.log( bs.$children )$el
()
[$el 返回当前 el选项的$dom, 可以直接使用jquery的操作方式]
Example:
//
console.log( bs.$el )$parent
()
[$parent 返回当前 el选项的父层$dom, 可以直接使用jquery的操作方式]
Example:
//
console.log( bs.$parent )clearKey
()
chainable
清除键值的访问
Example:
bs.clearKey()compile
-
el
[compile 解析模板里面的数据选择器, 一般是 needCompile: false 才需要手动调用, 或者是TAB异步加载的公共数据]
Parameters:
-
elString[选择器]
Example:
// 重新解析
bs.compile(".bui-page")compileHtml
-
el
[解析模板里面的{{}}, 通过这种方式的设置,值不会动态变更]
Parameters:
-
elString[选择器]
Example:
// 解析模板里面的{{}}
var html = bs.compileHtml("<div title="{{app.name}}">{{app.name}}</div>");delete
-
[name]
删除数据.并触发事件
Parameters:
-
[name]String optional[ 存储数据在哪个键值,对象则存储多个 ]
Example:
方法1:
var page = bs.delete("size");
// { size: 1}
方法2: 指定字段层级
var page = bs.delete("size.num");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变量变更的时候,触发回调
bs.oneTick("size",function () {
// 执行控件的初始化
})set
-
[name] -
[value]
保存数据,并会触发 通过 bs.on 监听的事件.
Parameters:
-
[name]String optional[ 存储数据在哪个键值,对象则存储多个 ]
-
[value]String | Object | Array optional[ 存值 ]
Example:
方法1:
var page = bs.set("size",1);
// { size: 1}
会触发以下dom的变更
<b b-text="page.size"></b>
方法2: 指定字段层级
var page = bs.set("size.num",1);
// { size: { name: 1 }}
会触发以下dom的变更
<b b-text="page.size.num"></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变量变更的时候,触发回调
bs.watch("a",function (newVal,oldVal) {
console.log(newVal);
console.log(oldVal);
})