BUI

其它版本:

API for BUI 1.5.4

Show:

bui.store Class

数据行为存储器 Data Behavior Store

按vue接口设计的数据驱动开发,但这不是vue,具体使用请查看教程或示例

预览地址: demo

Constructor

bui.store

(
  • [option]
)

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

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

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

清除键值的访问

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>");

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

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

Example:

      bs.destroy()

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变量变更的时候,触发回调
       bs.watch("a",function (newVal,oldVal) {
           console.log(newVal);
           console.log(oldVal);
       })

Attributes

$children

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

Example:

       //
       console.log( bs.$children )

$el

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

Example:

       //
       console.log( bs.$el )

$options

[$options 传进去的参数]

Example:

       //
       console.log( bs.$options )

$parent

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

Example:

       //
       console.log( bs.$parent )

$refs

[$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)
               }
           }
       })