BUI

其它版本:

API for BUI 1.6.x

Show:

bui.store Class

Module: Core

Available since 1.5.1

数据行为存储器 Data Behavior Store

按vue接口设计的状态管理,但这不是vue,具体使用请查看教程或示例

预览地址: demo

Constructor

bui.store

(
  • [option]
)

Defined in src/scripts/core/bui.store.js:10

Available since 1.5.1

Parameters:

  • [option] Object optional
    • [el] String optional

      最外层的选择器, 默认: ".bui-page"

    • scope String

      [数据的范围唯一标识, 比方公共数据可以用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

      定义的方法,便于拿取相关数据

    • [mixins] Array optional

      1.6.0新增 一个数组, 里面每个对象,都是一个单独组件,在当前实例合并,便于业务划分 {data:{},templates:{},methods:{},mounted:function(){}...} 参数跟store基本一致, 并且配合 view 标签,可以分模板处理

    • [needView] Boolean optional

      1.6.0 新增 是否解析view标签, 默认 true | false

    • [needComponent] Boolean optional

      1.6.0 新增 是否解析component标签, 默认 false(不解析) | true , 单页会由路由去解析

    • [templates] Object optional

      定义的模板方法

    • [beforeMount] Function optional

      数据解析前处理

    • [beforeCompile] Function optional

      1.5.3 新增 模板解析前处理

    • [compiled] Function optional

      1.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;
                                    

Methods

$mount

(
  • el
)
chainable

[$mount 跟 compile方法一致,这里多一个保持vue的写法,解析模板里面的数据选择器, 一般是 needCompile: false 才需要手动调用, 或者是TAB异步加载的公共数据]

Parameters:

  • el String

    [选择器]

Example:

       // 重新解析
                                                       bs.$mount(".bui-page")

clearKey

() chainable

Defined in src/scripts/core/bui.store.js:4044

Available since 1.5.2

清除键值的访问

Example:

      bs.clearKey()
                                                

compile

(
  • el
)
chainable

[compile 解析模板里面的数据选择器, 一般是 needCompile: false 才需要手动调用, 或者是TAB异步加载的公共数据]

Parameters:

  • el String

    [选择器]

Example:

       // 重新解析
                                                       bs.compile(".bui-page")

compileHtml

(
  • el
)
chainable

[解析模板里面的{{}}, 通过这种方式的设置,值不会动态变更]

Parameters:

  • el String

    [选择器]

Example:

       // 解析模板里面的{{}}
                                                       var html = bs.compileHtml("<div title="{{app.name}}">{{app.name}}</div>");
                                                

connect

(
  • name
  • [field]
  • [targetField]
  • [bool]
)
chainable

Defined in src/scripts/core/bui.store.js:3380

Available since 1.6.2

把两个不同的 bui.store 创建的实例里面data相同字段关联起来, 一般用于把父组件的参数同步给子组件

Parameters:

  • name Object

    [ 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]
)
chainable

删除数据.并触发事件

Parameters:

  • [name] String optional

    存储数据在哪个键值,对象则存储多个

Example:

      方法1:
                                                      var page = bs.delete("size");
                                                      // { size: 1}
                                                
                                                      方法2: 指定字段层级
                                                      var page = bs.delete("size.num");
                                                

destroy

() chainable

Defined in src/scripts/core/bui.store.js:4067

Available since 1.5.4

销毁实例,不再支持双向绑定

Example:

      bs.destroy()
                                                

disconnect

(
  • [field]
)
chainable

Defined in src/scripts/core/bui.store.js:3611

Available since 1.6.2

取消两个实例之间的关联字段.

Parameters:

  • [field] String optional

    指定关联哪个字段 , 可以支持 "xxx.xxxx" 指定对象里面的字段

Example:

      var bs = bui.store({
                                                          el:"",
                                                          scope:"",
                                                          data: {
                                                              test: "2222"
                                                          }
                                                      })
                                                      // 取消关联test字段, 不传则是取消所有关联的相同字段. 下次改变就不会触发bs2.test变更.
                                                      bs.disconect("test");
                                                

get

(
  • [name]
)
chainable

获取数据

Parameters:

  • [name] String optional

    取哪个键值的数据,不传则取全部

Example:

      var page = bs.get("size");
                                                

nextTick

(
  • callback
)
chainable

[ 监听模板的数据字段,在dom每次更新以后都会处理回调,多次调用会有多个处理的"nexttick"回调 ]

Parameters:

  • callback Function

    [ 回调, 数据更新以后的在这个回调里面的方法再进行执行 ]

Example:

       // 监听a变量变更的时候,触发回调
                                                       bs.nextTick(function () {
                                                           // 执行控件的初始化
                                                       })

off

(
  • [name]
  • [callback]
)
chainable

取消监听某个数据

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]
)
chainable

监听数据的修改, 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]
)
chainable

监听数据的修改, 只监听一次, 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
)
chainable

[只在某个keyname的数据更新,触发dom更新以后再处理回调,并且只监听一次,调用一次 ]

Parameters:

  • keyname String

    [ 监听某个值更新的时候触发一次 ]

  • callback Function

    [ 回调, 数据更新以后的在这个回调里面的方法再进行执行 ]

Example:

       // 监听a变量变更的时候,触发回调, 当模板上有多个size数据的时候, 会触发多次.
                                                       bs.oneTick("size",function () {
                                                           // 执行控件的初始化
                                                       })
                                                
                                                       // 相同键值 size ,以第一个为主, 以下函数不会执行.
                                                       bs.oneTick("size",function () {
                                                           // 执行控件的初始化
                                                       })

set

(
  • [name]
  • [value]
)
chainable

保存数据,并会触发 通过 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]
)
chainable

手动触发

Parameters:

  • [name] String optional

    数据的字段为事件名

Example:

      // 触发 2 为传过去的参数
                                                      bs.trigger("page","2")
                                                

watch

(
  • keyname
  • callback
)
chainable

[ watch方法跟选项的watch 表现一致,数据更新的时候执行, 还没到dom更新,这个主要是为了分离式监听]

Parameters:

  • keyname String

    [ 这个的值是 data 选项里面的值, 监听该值改变的时候, 触发这里的回调. ]

  • callback Function

    [ 回调, 回调里面的参数可以拿到新值跟上一个值 ]

Example:

       // 监听a变量变更的时候,触发回调
                                                       var unwatcha = bs.watch("a",function (newVal,oldVal) {
                                                           console.log(newVal);
                                                           console.log(oldVal);
                                                       })
                                                
                                                       1.6.2 新增 取消指定监听
                                                       unwatcha();
                                                

Attributes

$children

Defined in src/scripts/core/bui.store.js:644

Available since 1.5.4

[$children 返回当前 el选项的缓存子集, 子集新增删除这个值还是不会改变]

Example:

       //
                                                       console.log( bs.$children )

$el

Defined in src/scripts/core/bui.store.js:624

Available since 1.5.4

[$el 返回当前 el选项的$dom, 可以直接使用jquery的操作方式]

Example:

       //
                                                       console.log( bs.$el )

$options

Defined in src/scripts/core/bui.store.js:654

Available since 1.5.4

[$options 传进去的参数]

Example:

       //
                                                       console.log( bs.$options )

$parent

Defined in src/scripts/core/bui.store.js:634

Available since 1.5.4

[$parent 返回当前 el选项的父层$dom, 可以直接使用jquery的操作方式]

Example:

       //
                                                       console.log( bs.$parent )

$refs

Defined in src/scripts/core/bui.store.js:664

Available since 1.5.4

[$refs 获取dom,在方法内可以操作dom ]

Example:

       // 页面的dom
                                                       <div class="bui-page">
                                                           <main>
                                                               <div ref="test">通过$refs获取</div>
                                                           </main>
                                                       </div>
                                                       var bs = bui.store({
                                                           methods:{
                                                               init: functioin(){
                                                                   console.log(this.$refs.test.innerText)
                                                               }
                                                           }
                                                       })