W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
b-bind
綁定支持2種數(shù)據(jù)格式. 并且通過(guò)bs.title="XXX"
或者bs.attrs.title="xxx"
可以觸發(fā)屬性的修改. 綁定的字段在data
里面
var bs = bui.store({
scope: "page",
data: {
title: "這是動(dòng)態(tài)標(biāo)題",
attrs: {
"title": "這是動(dòng)態(tài)標(biāo)題",
"data-title": "自定義標(biāo)題",
}
}
})
html:
<!-- 綁定多個(gè) -->
<p b-bind="page.attrs">綁定title屬性,及自定義屬性</p>
<!-- 綁定1個(gè) -->
<p b-bind="page.title">綁定title屬性</p>
有三種值的設(shè)置, 推薦
b
標(biāo)簽作為默認(rèn)的雙向綁定標(biāo)簽. 如果內(nèi)容元素是塊狀, 可使用div
標(biāo)簽.
var bs = bui.store({
scope: "page",
data: {
value: "Hello bui.js",
attrs: {
title: "這是動(dòng)態(tài)標(biāo)題",
},
title: "<h1>html標(biāo)題</h1>",
}
})
<!-- 1.設(shè)置文本,支持對(duì)象 -->
<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"/>
靜態(tài)解析{{}}里面的值. 默認(rèn)沒(méi)有開(kāi)啟, 如果需要, 初始化時(shí)設(shè)置
needStatic: true
才會(huì)解析.templates
定義的模板方法里面不要使用{{}}
或者b-
開(kāi)頭的模板命令.
var bs = bui.store({
scope: "page",
data: {
title: "這是動(dòng)態(tài)標(biāo)題2",
attrs: {
"title": "這是動(dòng)態(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
時(shí),needStatic
不能為true,會(huì)干擾到路由, 那如何解析公共數(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ù)的值, 會(huì)在全局起作用, 比方商城的加入購(gòu)物車.
注意, 如果是異步加載,比方TAB的動(dòng)態(tài)加載,你想要解析這個(gè)
store
里面的模板的話, 需要在tab這個(gè)模塊里面執(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");
})
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: