BUI 計算屬性與偵聽器

1. computed 選項

模板不支持表達式, 模板盡量精簡, 把表達式定義到 computed 里面, 可以處理跟data相關的計算.

案例

例子1:

點擊按鈕的時候,a更新,并觸發(fā)頁面上的 aDouble 的dom更新.

js:

var bs = bui.store({
      scope: "page", // 用于區(qū)分公共數據及當前數據的唯一值
      data: {
          a: 2,
      },
      methods: {
          changeA: function (e) {
              this.a++;
          }
      },
      computed: {
          aDouble: function () {
            // a 改變的時候,會觸發(fā)乘法,并更新到dom
            return this.a * 2
          }
      }
  })

html:

<!-- 綁定事件,點擊改變 a的值,并且會觸發(fā) aDouble 跟著一起改變 -->
<div class="bui-btn" b-click="page.changeA">點擊1次,a+1,結果乘以2</div>


<div class="container-xy">
a: <b b-text="page.a" ></b>
結果: <b b-text="page.aDouble"></b>
</div>

例子2:

通過b-model把firstName,lastName 渲染出來, 并且當input輸入修改的時候,會觸發(fā)fullName的修改. fullName 支持兩種方式設置.

• function
• object

區(qū)別: function方式,fullName的修改不會重新賦值到 firstName, lastName. 如果要實現(xiàn)雙向聯(lián)動綁定, 則采用object方式, 以對象的方式. 查看例子3.

js:

var bs = bui.store({
    scope: "page", // 用于區(qū)分公共數據及當前數據的唯一值
    data: {
        firstName: "Hello",
        lastName: "BUI",
    },
    computed: {
        fullName: function() {
            var val = this.firstName + ' '+ this.lastName;
            return val;
        }
    },
})

html:

<ul class="bui-list">
    <li class="bui-btn bui-box clearactive">
        <label class="bui-label">姓: </label>
        <div class="span1">
            <div class="bui-value"><input type="text" value="" placeholder="請輸入" b-model="page.firstName"></div>
        </div>
    </li>
    <li class="bui-btn bui-box clearactive">
        <label class="bui-label">名: </label>
        <div class="span1">
            <div class="bui-value"><input type="text" value="" placeholder="請輸入" b-model="page.lastName"></div>
        </div>
    </li>
</ul>


<!-- firstName,lastName改變就會觸發(fā) fullName 的綁定 -->
<div class="container-xy">
結果: <b b-text="page.fullName"></b>
</div>

例子3:

雙向聯(lián)動修改, bs.fullName = "BUI Best" 設置以后, 會把firstName,lastName 重新賦值.

js:

var bs = bui.store({
    scope: "page", // 用于區(qū)分公共數據及當前數據的唯一值
    data: {
        firstName: "Hello",
        lastName: "BUI",
    },
    computed: {
        // 2. 雙向聯(lián)動 fullName 改變,會觸發(fā)各自改變 firstName,lastName,
        fullName: {
            get: function () {
              return this.firstName + ' ' + this.lastName
            },
            set: function (newValue) {
              var names = newValue.split(' ')
              this.firstName = names[0]
              this.lastName = names[names.length - 1]
            }
        }
    },
})

例子4:

登錄按鈕的狀態(tài), 當firstName,lastName 有值的時候, 登錄按鈕可以點擊; disabled 狀態(tài)為false, 當沒有值的時候, disabled 為 true 不能點擊.
disabled computed 綁定在登錄按鈕的b-class上, 有值沒值的時候, 會去修改class有沒有 disabled 樣式名.

js:

var bs = bui.store({
    scope: "page", // 用于區(qū)分公共數據及當前數據的唯一值
    data: {
        firstName: "",
        lastName: "",
    },
    computed: {
        disabled: function() {
            // 注意: 這里需要先緩存下來值再進行判斷.
            var firstName = this.firstName,
                lastName = this.lastName;


            if( firstName && lastName ){
              return false;
            }else{
              return true;
            }
        }
    },
})

html:

<ul class="bui-list">
    <li class="bui-btn bui-box clearactive">
        <label class="bui-label">姓: </label>
        <div class="span1">
            <div class="bui-value"><input type="text" value="" placeholder="請輸入" b-model="page.firstName"></div>
        </div>
    </li>
    <li class="bui-btn bui-box clearactive">
        <label class="bui-label">名: </label>
        <div class="span1">
            <div class="bui-value"><input type="text" value="" placeholder="請輸入" b-model="page.lastName"></div>
        </div>
    </li>
</ul>
<div class="container-xy">
  <div b-class="page.disabled" class="bui-btn primary round">登錄</div>
</div>

注意: disabled方法里面, 有個注釋提醒, 為何要先緩存? 因為經常我們習慣性的直接去判斷? 比如:

if( this.firstName && this.lastName ){
  return false;
}else{
  return true;
}

當初始值 firstName跟lastName 為空的時候, if 只拿到 firstName 不正確, 就會跳到 true, 導致 lastName 改變的時候,不會重新執(zhí)行判斷條件. 這在computed是經常見到的錯誤, 如果你希望這些值都會改變 disabled, 那應該先進行緩存.

效果預覽

查看效果

2. watch 選項

watch 可以用來監(jiān)聽 data 里面的鍵值的變化以后處理其它事情. watch函數返回當前監(jiān)聽變量的新值跟舊值newVal,oldVal. 比方下面的例子.

案例

例子4:

var bs = bui.store({
      scope: "page", // 用于區(qū)分公共數據及當前數據的唯一值
      data: {
          a: 2,
          b: 1,
      },
      methods: {
          changeA: function (e) {
              this.a++;
          }
      },
      watch: {
          a: function (newVal,oldVal) {
            this.b = this.a * 2;
          }
      }
  })

html:

<!-- 綁定事件,點擊改變 a的值,并且會觸發(fā) b 跟著一起改變 -->
<div class="bui-btn" b-click="page.changeA">點擊1次,a+1,結果乘以2</div>


<div class="container-xy">
a: <b b-text="page.a" ></b>
結果: <b b-text="page.b"></b>
</div>

computed 的例子也可以用watch實現(xiàn).

var bs = bui.store({
  scope: 'page',
  data: {
    firstName: 'Hello',
    lastName: 'BUI',
    fullName: 'Hello BUI'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

除了 watch 選項之外，您還可以使用命令式的 bs.watch 方法?？梢詫崿F(xiàn)分離式監(jiān)聽.

bs.watch("firstName",function(val){
  this.fullName = val + ' ' + this.lastName
})


bs.watch("lastName",function(val){
  this.fullName = this.firstName + ' ' + val
})

效果預覽

查看效果