sciter 触发 JS 类组件的自定义事件的示例

By terrorist at 2022-04-27 • 0人收藏 • 1193人看过

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=199;bottom=239)
winform.add(
button={cls="button";text="Button";left=32;top=144;right=128;bottom=184;z=1}
)
/*}}*/

import web.sciter
import web.sciter.debug; 
		
var wb = web.sciter( winform )
wb.attachEventHandler( web.sciter.debug );

wb.html = /**
<!doctype html>
<html>
<head>
   <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script>
    	class Hello extends Element{
    	    render(){
    	        return <div class="test">hello</div>
    	    }
    	    
    	    ["on eventName"](evt){
    	        console.log("事件被触发了")
    	        this.innerText = evt.data;
    	    }
    	}
    	document.body.content(<Hello />)
    </script>
    <style type="text/css">
    html,body{ height:100%; margin:0; } 
    </style>
</head>
<body>
</body>
</html>
**/


winform.button.oncommand = function(id,event){
	wb.querySelector(".test").fireEvent("eventName", "来自 aardio 的数据")
}

winform.show();
win.loopMessage();

使用场景，一个自定义事件相当于订阅器， aardio 触发订阅器让 sciter 更新界面

注意：后端通知前端更新界面，不建议这种针对某个前端节点去通知，应该用全局事件，查看 https://chengxu.xyz/t/21339

aardio