Open and modern framework for building user interfaces.
npm install omi
class Hello extends Omi.Component { constructor(data) { super(data); } style () { return ` h1{ cursor:pointer; } `; } handleClick(target, evt){ alert(target.innerHTML); } render() { return ` <div> <h1 onclick="handleClick(this, event)">Hello ,{{name}}!</h1> </div> `; } } Omi.render(new Hello({ name : "Omi" }),"body");
点击这里->在线试试
你可以使用Omi.makeHTML来生成组件标签用于嵌套。
Omi.makeHTML('Hello', Hello);
那么你就在其他组件中使用,并且通过data-*的方式可以给组件传参,如:
... render() { return ` <div> <div>Test</div> <Hello data-name="Omi" /> </div> `; } ...
点击这里->在线试试
你可以使用 webpack + babel ,在webpack配置的module设置 babel-loader ,立马就能使用ES6+来编写你的web程序。
当然Omi没有抛弃ES5的用户,你可以使用ES5的方式编写Omi。
var Hello = Omi.create("Hello", { style: function () { return "h1{ cursor:pointer }"; }, handleClick: function (dom) { alert(dom.innerHTML) }, render: function () { return ' <div><h1 onclick="handleClick(this, event)">Hello ,{{name}}!</h1></div>' } }); var Test = Omi.create("Test", { render: function () { return '<div>/ <div>Test</div>/ <Hello data-name="Omi" />/ </div>' } }); Omi.render(new Test(),'#test');
和ES6+的方式不同的是,不再需要makeHTML来制作标签用于嵌套,因为 Omi.create的第一个参数的名称就是标签名。
点击这里试试ES5写Omi程序
Github: https://github.com/AlloyTeam/omi
I need you.