-
index.html <!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4/dist/ofa.js" debug></script>
<script src="https://unpkg.com/sober@1/dist/sober.min.js"></script>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
o-app {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<o-app src="./app-config.mjs"></o-app>
</body>
</html>app-config.mjs export const home = './test.html';test.html <template page>
<s-search id="searchA" placeholder="搜索A" on:input="searchA = $event.target.value">
<s-icon name="search" slot="start"></s-icon>
<s-icon-button slot="end" on:click="clearSearchA($event)">
<s-icon name="close"></s-icon>
</s-icon-button>
</s-search>
<s-search id="searchB" placeholder="搜索B" on:input="searchB = $event.target.value">
<s-icon name="search" slot="start"></s-icon>
<s-icon-button slot="end" on:click="clearSearchB($event)">
<s-icon name="close"></s-icon>
</s-icon-button>
</s-search>
<s-search id="searchC" placeholder="搜索C" sync:value="searchC">
<s-icon name="search" slot="start"></s-icon>
<s-icon-button slot="end" on:click="clearSearchC($event)">
<s-icon name="close"></s-icon>
</s-icon-button>
</s-search>
<s-chip clickable="true" checked="false" type="outlined" on:click="chiptest($event)">0</s-chip>
<x-fill :value="list">
<s-chip clickable="true" checked="false" type="outlined" on:click="$host.chiptest($event)">{{ $data }}</s-chip>
</x-fill>
<script>
export default ({ query }) => {
return {
data: {
searchA: '',
searchB: '',
searchC: '',
list: [1, 2, 3]
},
watch: {
searchA(val) {
console.log('searchA', val);
},
searchB(val) {
console.log('searchB', val);
},
searchC(val) {
console.log('searchC', val);
}
},
proto: {
clearSearchA(e) {
const search = $(e.target).root.$('#searchA');
search.ele.value = '';
this.searchA = '';
},
clearSearchB(e) {
const search = $(e.target).root.$('#searchB');
search.attr('value', '');
},
clearSearchC(e) {
const search = $(e.target).root.$('#searchC');
search.attr('value', '');
},
chiptest(e) {
this.shadow.all('s-chip').forEach(chip => {
console.log('attr', chip.attr('checked'));
});
this.shadow.all('s-chip').forEach(chip => {
console.log('ele', chip.ele.checked);
});
}
},
};
};
</script>
</template> |
Beta Was this translation helpful? Give feedback.
Answered by
kirakiray
Nov 12, 2025
Replies: 3 comments 1 reply
-
|
你好，SoberJS是用原生JS写的组件，而 ofa.js 内的模板绑定语法，只适用于基于 ofa.js 开发的组件，所以 s-search 组件可能要重新包装成 ofajs的组件才能用模板语法。 比如我这里重新包装一下 s-search 为 w-search： w-search.html <template component>
<s-search
attr:placeholder="placeholder"
on:input="value = $event.target.value"
>
<slot name="start" slot="start"></slot>
<slot></slot>
</s-search>
<script>
export default async () => {
return {
tag: "w-search",
attrs: {
placeholder: null,
},
data: {
value: "",
},
watch: {
value() {
if (this.shadow.$("s-search").ele.value !== this.value) {
this.shadow.$("s-search").ele.value = this.value;
}
},
},
attached() {
if (this.attr("value") !== null) {
// 只使用第一次的 attribute 初始化 value
this.value = this.attr("value");
}
},
};
};
</script>
</template>test.html <l-m src="./w-search.html"></l-m>
<w-search
id="searchA"
placeholder="搜索A"
on:input="searchA = $event.target.value"
>
<s-icon name="search" slot="start"></s-icon>
<s-icon-button slot="end" on:click="clearSearchA($event)">
<s-icon name="close"></s-icon>
</s-icon-button>
</w-search>
<w-search
id="searchB"
placeholder="搜索B"
on:input="searchB = $event.target.value"
>
<s-icon name="search" slot="start"></s-icon>
<s-icon-button slot="end" on:click="clearSearchB($event)">
<s-icon name="close"></s-icon>
</s-icon-button>
</w-search>
<w-search id="searchC" placeholder="搜索C" sync:value="searchC">
<s-icon name="search" slot="start"></s-icon>
<s-icon-button slot="end" on:click="clearSearchC($event)">
<s-icon name="close"></s-icon>
</s-icon-button>
</w-search>
...重新包装的逻辑，是将ofajs组件的属性变动，响应成原生js的属性变动。 |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
cyb233
-
|
使用 |
Beta Was this translation helpful? Give feedback.
0 replies
-
这个问题貌似是 s-chip 设计的问题，它似乎是设置了一个延迟，去更新组件内的真实 checked 值，你可以替换一下代码试试： export default ({ query }) => {
return {
...
proto: {
...
chiptest(e) {
// this.shadow.all("s-chip").forEach((chip) => {
// console.log("attr", chip.attr("checked"));
// });
// this.shadow.all("s-chip").forEach((chip) => {
// console.log("ele", chip.ele.checked);
// });
const { target } = e;
console.log(target.checked);
setTimeout(() => {
console.log(target.checked);
}, 100);
},
},
};
}; |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
我看了下，是因为click处理在修改checked之前，所以应该用change事件 |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
你好，SoberJS是用原生JS写的组件，而 ofa.js 内的模板绑定语法，只适用于基于 ofa.js 开发的组件，所以 s-search 组件可能要重新包装成 ofajs的组件才能用模板语法。
比如我这里重新包装一下 s-search 为 w-search：
w-search.html