Mithril-重新呈现动态内容
Mithril - Rerender dynamic content
在延迟对象返回数据后,我正在尝试重新呈现DOM元素。我在控制台上调试它,看起来我的元素正在创建中,但它从未显示在页面上。如果我添加静态内容,它会按预期工作。
m('div', {class: 'table-responsive'}, [
m('table', {class: 'table'}, [
m("thead", [
m('tr', [
m('th', '#'),
m('th', 'Groups'),
])
]),
m('tbody', findGroupsDeferred.promise.then(function(data){ // findGroupsDeferred returns when the promise is complete with my data.
data.group.map(function(group) {
return m("tr", [
m("td", [
m("input[type=checkbox] checked", {
value: group,
onclick: function (event) {
if (event.target.checked) {
ctrl.addGroup(ctrl.groups(event.target.value))
} else {
ctrl.removeGroup(ctrl.groups(event.target.value))
}
}
})
]),
m("td", group),
])
});
}))
])
]),
Roamer-1888说得很对。这不能在视图中完成。你有几个选择来实现这一点:
首先是在控制器中等待结果:
controller: function() {
scope = {
groups: []
}
findGroupsDeferred.promise.then(function(data) {
scope.groups = data.group;
}
return scope;
},
view: function(scope) {
return scope.groups.map(function(group) {
return group.name // or what ever you want to do here
}
}
另一种选择是为此创建一个组件,这几乎会导致相同的代码接受它的封装。第三种选择是将m.prop
与为此推迟的mithrils一起使用。
我不认识mithril,但我猜promise不能用那种方式。
从承诺的第一性原理来看,用promise.then(...)
包装整个m()
表达式更有意义。换句话说,在findGroupsDeferred.promise
解析后构建整个表,而不是试图针对表的内部。
findGroupsDeferred.promise.then(function(data) { // findGroupsDeferred returns when the promise is complete with my data.
m('div', {class: 'table-responsive'}, [
m('table', {class: 'table'}, [
m("thead", [
m('tr', [
m('th', '#'),
m('th', 'Groups'),
])
]),
m('tbody', data.group.map(function(group) {
return m("tr", [
m("td", [
m("input[type=checkbox] checked", {
value: group,
onclick: function (event) {
if (event.target.checked) {
ctrl.addGroup(ctrl.groups(event.target.value));
} else {
ctrl.removeGroup(ctrl.groups(event.target.value));
}
}
})
]),
m("td", group),
]);
}))
])
]),
});
或者,mithril有一种在web服务请求完成之前进行渲染的机制,这在这里可能是相关的。
相关文章:
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 当组件准备就绪时,如何在Polymer中动态注册新属性
- 剑道UI下载列表:如何动态添加新元素
- 在2D数组中动态推送新列
- 在onclick上动态创建新页面
- jQuery.tmpl没有呈现动态html
- 在新行(html)中动态添加更多文本字段
- 将从控制器返回的selectbox值动态呈现为json
- 在DIV中动态插入HTML并访问新元素
- 如何动态生成X数量的新<输入>基于a<选择>(Angular2内)
- jsrender是否可以动态地呈现字段名
- 动态添加新元素并更改其内容
- Rails 4:使用AJAX在同一页面上动态呈现表单
- bootstrap没有通过erb与动态呈现的html绑定
- JavaScript - 有没有办法动态创建对象的新实例
- 具有 D3 JS 并行集的动态新维度
- 需要获取qtip来显示正确的动态新javascript html表数据
- 我如何在同一个角花括号({{}})中动态地呈现javascript数据和html
- jQuery自动完成动态新行
- jQuery可排序Portlet+创建动态新Portlet