BUI 屬性與值綁定

案例

1. 屬性動態(tài)綁定

b-bind 綁定支持2種數(shù)據(jù)格式. 并且通過 bs.title="XXX" 或者 bs.attrs.title="xxx" 可以觸發(fā)屬性的修改. 綁定的字段在 data 里面

• Object : 鍵值為樣式名,值為布爾值
• String : 值為樣式名

var bs = bui.store({
    scope: "page",
    data: {
        title: "這是動態(tài)標(biāo)題",
        attrs: {
            "title": "這是動態(tài)標(biāo)題",
            "data-title": "自定義標(biāo)題",
        }
    }
})

html:

<!-- 綁定多個 -->
<p b-bind="page.attrs">綁定title屬性,及自定義屬性</p>


<!-- 綁定1個 -->
<p b-bind="page.title">綁定title屬性</p>

效果預(yù)覽

查看效果

2. 值的動態(tài)綁定

有三種值的設(shè)置, 推薦 b 標(biāo)簽作為默認(rèn)的雙向綁定標(biāo)簽. 如果內(nèi)容元素是塊狀, 可使用 div 標(biāo)簽.

• b-text : 設(shè)置文本
• b-html : 設(shè)置html
• b-value : 設(shè)置屬性value,一般用于表單

var bs = bui.store({
    scope: "page",
    data: {
        value: "Hello bui.js",
        attrs: {
            title: "這是動態(tài)標(biāo)題",
        },
        title: "<h1>html標(biāo)題</h1>",
    }
})

<!-- 1.設(shè)置文本,支持對象 -->
<b b-text="page.attrs.title"></b>


<!-- 2.設(shè)置Html -->
<div b-html="page.title"></div>


<!-- 3.設(shè)置value -->
<input b-value="page.value" class="bui-input"/>

效果預(yù)覽

查看效果

3. 靜態(tài)解析

靜態(tài)解析{{}}里面的值. 默認(rèn)沒有開啟, 如果需要, 初始化時設(shè)置 needStatic: true 才會解析. templates定義的模板方法里面不要使用{{}} 或者 b-開頭的模板命令.

• 不支持表達(dá)式
• 不支持動態(tài)修改
• 只在第一次渲染解析

var bs = bui.store({
    scope: "page",
    data: {
        title: "這是動態(tài)標(biāo)題2",
        attrs: {
            "title": "這是動態(tài)標(biāo)題",
            "data-title": "自定義標(biāo)題",
        }
    },
    needStatic: true,
})

html:

<div title="{{page.attrs.title}}">{{page.title}}</div>

值得注意的是, 如果你的數(shù)據(jù)是公共數(shù)據(jù), isPublic:true 時, needStatic不能為true,會干擾到路由, 那如何解析公共數(shù)據(jù)的{{}}值呢?

window.router = bui.router();


bui.ready(function() {
    // 公共數(shù)據(jù)
    window.store = bui.store({
        scope: "app",
        isPublic: true,
        data: {
            firstName: "Hello",
            lastName: "BUI"
        }
    })


    // 初始化路由
    router.init({
        id: "#bui-router",
        progress: true,
        hash: true,
        store: store,
    })


})

把store掛載到路由, 就可以解析公共數(shù)據(jù)的 {{app.firstName}} 之類的數(shù)據(jù), 在模塊里面,你也可以使用 store.firstName 讀取跟修改公共數(shù)據(jù)的值, 會在全局起作用, 比方商城的加入購物車.

注意, 如果是異步加載,比方TAB的動態(tài)加載,你想要解析這個 store 里面的模板的話, 需要在tab這個模塊里面執(zhí)行一次.

tab-setting.html

<div b-text="app.firstName"></div>

tab-setting.js

loader.define(function(){
  // tab-xxx 為當(dāng)前tab的樣式或id名稱.
  store.compile(".tab-setting");
})