omi-binding
v1.0.18
Published
a model binding module
Downloads
7
Maintainers
Readme
omi-binding
a omi binding module
install
npm i omi-binding
usage
import 'omi-binding'
//binding to window
<input o-model="location.href" style="width:50rem;"></input>
import { render, h, define, Component } from "omi/src/omi";
import "omi-binding";
define(
"app-main",
class extends Component {
data = {
name: "lv-saharan",
likes: ["tv", "music", "reading"],
};
//指定绑定的范围
//不指定时绑定范围是当前组件
//可以通过updateBindings更新绑定
get bindingScope() {
return this.data;
}
showLikes = true;
render() {
return (
<fieldset>
<legend>form binding</legend>
<ul>
<li>
name:
<input o-model="name" />
</li>
{this.showLikes ? (
<li>
likes:
{["tv", "game", "reading", "music", "others"].map((l) => (
<label>
<input o-model="likes" type="checkbox" value={l}></input>
{l}
</label>
))}
</li>
) : null}
</ul>
<button
onClick={(evt) => {
this.data.name = "sa";
this.updateBindings();
}}
>
set name to sa
</button>
<button
onClick={(evt) => {
this.showLikes = !this.showLikes;
this.update();
}}
>
toggle likes
</button>
<button
onClick={(evt) => {
alert(JSON.stringify(this.data));
}}
>
show data
</button>
</fieldset>
);
}
}
);
render(<app-main />, "body");
pattern filter
<input
pattern="^\d+$"
class="form-control"
id="code"
placeholder="****"
o-model="code"
required
/>
//only number can be input
use esbuild to run the examples
just use esbuild and live server | nginx ....
npm start
and then use local-dev-server to view examples/index.html
//esbuild.js
let [mode] = process.argv.splice(2);
const examples = "./examples"
let options = {
jsxFactory: 'h',
jsxFragment: 'h.f',
entryPoints: [`${examples}/index.jsx`],
outdir: examples,
format: "esm",
bundle: true,
sourcemap: true
}
const esbuild = require('esbuild')
esbuild.build({
...options,
watch: {
onRebuild(error, result) {
if (error) console.error('watch build failed:', error)
else console.log('watch build succeeded:', result)
},
}
})