mithril.jsがループ・コール・コントローラーでスタックしました

トークンをPOSTし、結果を順序付きリストとして表示しようとしています。私は入力のonchangeを更新するリストを希望します。ページロードで要求POSTは無限エラーでループしている：mithril.jsがループ・コール・コントローラーでスタックしました

TypeError: ctrl.keys(...) is undefined

私はデータは、コントローラの動作に結合する方法の私の仮定は完全に間違っていると思われます。

m.request

//component 
 
var tISM = {}; 
 

 

 
//model 
 
tISM = { 
 
\t Key: function(data) { 
 
\t \t this.Id = m.prop(data.Id); 
 
\t \t this.Name = m.prop(data.Name); 
 
\t \t this.CreationTime = m.prop(data.CreationTime); 
 
\t }, 
 

 
\t keys: function(token) { 
 
\t \t return m.request({ 
 
\t \t \t method: "POST", 
 
\t \t   \t url: "key/list", 
 
\t \t \t data: { "token": token }, 
 
\t \t \t type: tISM.Key 
 
\t \t }) 
 
\t }, 
 
}; 
 

 
//controller 
 
tISM.controller = function() { 
 
\t // when this controller is updated perform a new POST for data by calling message? 
 
\t var token = m.prop("xxx") 
 

 
\t var keys = function() { 
 
\t \t tISM.keys(this.token) 
 
\t } 
 
\t return { token, keys } 
 
}; 
 

 
//view 
 
tISM.view = function(ctrl) { 
 
\t return m("div"), [ 
 
\t \t m("ol", ctrl.keys().map(function(key, index) { 
 
\t \t \t return m("li", key.Id, key.Name, key.CreationTime) 
 
\t \t })), 
 
\t \t m("input", { 
 
\t \t \t onchange: m.withAttr("value", ctrl.token) 
 
\t \t }) 
 
\t ] 
 
}; 
 

 

 

 
//initialize 
 
m.mount(document.getElementById("app"), tISM);

<script src="http://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Mithril App</title> 
 
    <script src="mithril.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="app"></div> 
 
    </body> 
 
</html>

出典

2016-10-26 Theodore Cowan

私の問題は、私はJavaScriptを知りませんでした。これは動作します：

//component 
 
var tISM = {}; 
 

 
//model 
 
tISM.Key = function(data) { 
 
\t this.Id = m.prop(data.Id); 
 
\t this.Name = m.prop(data.Name); 
 
\t this.CreationTime = m.prop(data.CreationTime); 
 
} 
 
tISM = { 
 

 
\t keys: function(token) { 
 
\t \t return m.request({ 
 
\t \t \t method: "POST", 
 
\t \t   \t url: "key/list", 
 
\t \t \t data: { "token": token }, 
 
\t \t \t type: tISM.Key 
 
\t \t }) 
 
\t }, 
 
}; 
 

 
//controller 
 
tISM.controller = function() { 
 
\t this.token = m.prop("") 
 
\t this.keys = m.prop([]) 
 

 
\t this.updateToken = function(token) { 
 
\t \t this.token(token) 
 
\t \t tISM.keys(this.token).then(this.keys) 
 
\t }.bind(this) 
 

 
}; 
 

 
//view 
 
tISM.view = function(ctrl) { 
 
\t return m("div"), [ 
 
\t \t m("input", { 
 
\t \t \t oninput: m.withAttr("value", ctrl.updateToken) 
 
\t \t }), 
 
\t \t m("ol", ctrl.keys().map(function(key, index) { 
 
\t \t \t return m("li", key.Id, key.Name, key.CreationTime) 
 
\t \t })), 
 
\t ] 
 

 
}; 
 

 

 
//initialize 
 
m.mount(document.getElementById("app"), tISM);

出典

2016-10-27 21:41:49

（）は遅延なく、値そのものを返します。私は値を得る一つの方法を示す下のスニペットを持っています。 m.request（）を明示的に置き換えて、フードの中の遅延呼び出しと、ポストではなくタイムアウトに置き換えました。

//component 
 
var tISM = {}; 
 

 

 
//model 
 
tISM = { 
 
\t Key: function(data) { 
 
\t \t this.Id = m.prop(data.Id); 
 
\t \t this.Name = m.prop(data.Name); 
 
\t \t this.CreationTime = m.prop(data.CreationTime); 
 
\t }, 
 

 
keys: function(token) { 
 
    m.startComputation() 
 
    var d = m.deferred(); 
 
    setTimeout(function() { 
 
    d.resolve([1,2,3]); 
 
    m.endComputation(); 
 
    }, 1000); 
 
    return d.promise; 
 
} 
 
}; 
 

 
//controller 
 
tISM.controller = function() { 
 
\t // when this controller is updated perform a new POST for data by calling message? 
 
\t var token = m.prop("xxx") 
 

 
    var keys = m.prop([]); 
 
    tISM.keys(this.token).then(keys) 
 
    return { 
 
token: token, 
 
keys: keys 
 
    } 
 
\t return { token, keys } 
 
}; 
 

 
//view 
 
tISM.view = function(ctrl) { 
 
\t return m("div"), [ 
 
\t \t m("ol", ctrl.keys().map(function(key, index) { 
 
\t \t \t return m("li", key.Id, key.Name, key.CreationTime) 
 
\t \t })), 
 
\t \t m("input", { 
 
\t \t \t onchange: m.withAttr("value", ctrl.token) 
 
\t \t }) 
 
\t ] 
 
}; 
 

 

 

 
//initialize 
 
m.mount(document.getElementById("app"), tISM);

<script src="http://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Mithril App</title> 
 
    <script src="mithril.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="app"></div> 
 
    </body> 
 
</html>

出典

2016-10-26 23:21:41 Jason

mithril.jsがループ・コール・コントローラーでスタックしました

答えて

関連する問題