因為Riot是基於自訂標籤【元件】開發的。標籤內部的所有屬性和方法,都是私有的,而外部要存取標籤內容,就顯得有些困難重重。
如果愣是要訪問標籤裡的內容,有幾種吃力不討好的方法:
1、window全局變數法
[code]<script type="riot/tag"> <todo> <h1>{ title }</h1> this.title = opts.title || "da宗熊"; // window.TODO劫持现在的this对象 window.TODO = this; </todo> </script>
內容。
缺點:
當頁面有多個相同標籤時,不適用
2、riot.mount回傳值
[code]<script type="riot/tag"> <todo> <h1>{ title }</h1> this.title = opts.title || "da宗熊"; </todo> </script> <script> // 这个todo,返回的是个数组!!! var todo = riot.mount("todo"); // todo = [tag]; </script>
[code]riot.compile("todo.tag", function(){ /*才能获取到返回的内容*/ var todo = riot.mount("todo")[0]; });
上面的,都並不是王道,在Riot中,內置了發布者,我們只需要通過簡單的代碼,就能創建一個類別jQuery的發布者:
[code]var opts = riot.observable({ // some code... });
透過riot.observable產生的發布者,有on, off, trigger, one等常用方法【熟悉jq的同學,看名字應該知道怎麼回事了】。
那opts為例,這裡對各個方法簡要說明:
[code]// 监听事件 opts.on("event1", function(data1, data2){ // 监听event1事件 // data1和data2是trigger传入的参数 // data1 = 1, data2 = 2 console.log(data1, data2); }); // 发布一个事件 // 该事件带有 1和2 作为参数 // 上面的on("event1")的回调fn将会执行 opts.trigger("event1", 1, 2); // 解除event1 的所有监听,第二个参数可选 // 如果有第二个参数[function],则只解绑该函数 opts.off("event1"); // one与on类似,只是one如果执行过一次,就自动解除绑定 opts.one("event1", function(data1){ console.log(data1); }); opts.trigger("event1", 1, 2);
[code]1 2 1
Riot推崇我們使用 opts 和 observable 解決內外通訊的問題。看範例:
[code]<!Doctype html> <html> <head> <meta charset="utf-8" /> <title>Riot.js 事件监听</title> <script type="text/javascript" src="riot.js"></script> <script type="text/javascript" src="compiler.js"></script> </head> <body> <todo></todo> </body> <script type="riot/tag"> <todo> <a href="javascript:;" onclick={ opts.login }>登录</a> opts.on("outside", function(value){ console.log("outside value:" + value); }); </todo> </script> <script type="text/javascript"> var opts = riot.observable({ login: function(params){ // 这里的this被todo更改了.. opts.trigger("outside", "登录成功..."); } }); riot.mount("todo", opts); </script> </html>
點擊登入後,效果如下:
透過事件監聽和發布,能很好的接觸內外通訊的問題,同時,也可
以很大程度上,限制某些資料的存取權限。
不過,opts很大程度上,和標籤耦合在一起了。
標籤需要知道opts將會發布“outside”,並監聽;
opts則需要知道標籤將會調用它的 login 方法;
如果沒有良好的團隊規範,這將會是一場災難。
SO:
無論哪一種模式,哪一種方法,都有自己的適用場景。用對了,就是畫龍點睛,用錯了,那是寸步難行。動手前多想想
以上就是riot.js學習【八】觀察者的內容,更多相關內容請關注PHP中文網(www.php.cn)!