Question

我正在尝试发布令牌并将结果显示为有序列表。我希望列表更新输入的更改。在页面加载时，请求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（）返回延迟，而不是值本身。我在下面有一个片段，显示了一种获取价值的方法。我明确地将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陷入循环调用控制器

2 个答案: