Mais conteúdo relacionado
Semelhante a 海外で注目されてるJs framework “mithril”の特徴
Semelhante a 海外で注目されてるJs framework “mithril”の特徴 (20)
海外で注目されてるJs framework “mithril”の特徴
- 12. 4. Mithrilの特徴③
m.mount(root, module)
⇒ Mithrilで定義したアプリケーションを実行
m.prop()
⇒ getter/setter API
m(selector, obj, value)
⇒ VirtualDOMの生成に使用するAPI
m.withAttr(prop, callback)
⇒ “onclick”や“onchange”等のイベント発生時に実行する関数を定義す
る際に使用
4つの主要API
- 13. 4. Mithrilの特徴③
m.mount
var myCtrl = function(){ ~controller処理~ };
var myView = function(ctrl){
return [
m(“div”, “test”),
m(“p”, ctrl.description() )
];
};
m.mount( document.getElementById("root"), {
controller: myCtrl,
view : myView
});
Mithrilで定義したアプリケーションを実行
- 14. 4. Mithrilの特徴③
m.prop
var myCtrl = function() {
this.name = m.prop("hoge");
console.log( this.name ); // -> function(){...}
console.log( this.name() ); // -> "hoge"
//change value
this.name("fuga");
console.log( this.name() ); // -> "fuga"
};
getter/setter API
- 15. 4. Mithrilの特徴③
m
m(“br”) => <br>
m(“div”, “Hello”) => <div>Hello</div>
m("div", {class: "container"}, "Hello");
=> <div class="container">Hello</div>
m("div.container", "Hello");
=> <div class="container">Hello</div>
m("div[href='hoge.html']", "Hello");
=> <div href="hoge.html">Hello</div>
VirtualDOMの生成に使用するAPI
- 16. 4. Mithrilの特徴③
m.withAttr
var myCtrl = function() {
this.alert = function(value){
alert(value); //click
};
}
var myView = function(ctrl) {
return [
(“button", {onclick: m.withAttr("value", ctrl.alert), value: ”click” } )
];
}
イベントのCallback処理を定義
- 18. 4. Mithrilの特徴③
m.startComputation
var myCtrl = function() {
var that=this;
this.text = m.prop("first");
setTimeout(function(){
m.startComputation();
that.text ( "setTimeout“);
m.endComputation();
},2000);
};
Viewの描画を行う
m.mount、m.route、m.request、event実行処理の内部でも使用されている。
endComputationのタイミングで再描画通知が送信される。
- 19. 4. Mithrilの特徴③
m.redraw
var myCtrl = function() {
var that=this;
this.text = m.prop("first");
setTimeout(function(){
that.text ( "setTimeout“);
m.redraw(true);
},2000);
};
Viewの強制再描画を行う
強制的に再描画通知を送る場合使用。
- 20. 4. Mithrilの特徴③
m.redraw.strategy
var myCtrl = function() {
var that=this;
this.text = m.prop("first");
console.log(m.redraw.strategy()); //-> all
m.redraw.strategy("none");
console.log(m.redraw.strategy()); //-> none
setTimeout(function(){
that.text ( "setTimeout“);
console.log(m.redraw.strategy()); //-> diff
m.redraw(true);
},2000);
};
描画方法を設定可能
all、diff、noneの3種類。引数省略で取得可能。