mithril.js 卡在循环调用控制器中

Question

我正在尝试 POST 一个令牌并将结果显示为有序列表。我希望列表更新输入的onchange。在页面加载时，请求 POST 无限循环并出现错误：

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

我怀疑我对控制器上的数据绑定如何工作的假设是完全错误的。

//component
var tISM = {};


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

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

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

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

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



//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>

Answer 1

m.request() returns 一个延迟，而不是值本身。我在下面有一个片段显示了一种获取值的方法。我明确地用引擎盖下的延迟调用和超时而不是 post.

替换了 m.request()

//component
var tISM = {};


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

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() {
 // when this controller is updated perform a new POST for data by calling message?
 var token = m.prop("xxx")

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

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



//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>

Answer 2

我的问题是我不知道 javascript。这有效：

//component
var tISM = {};

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

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

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

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

};

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

};


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

mithril.js 卡在循环调用控制器中

mithril.js stuck in loop calling controller

mithril.js