javascript - Mithril - 渲染动态内容

Question

在我的延迟对象带着数据返回后，我试图重新渲染我的 DOM elemnet。我在控制台上对此进行调试，似乎我的元素正在创建，但它从未显示在页面上。如果我添加静态内容，它就会按预期工作。

        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),
                        ])
                    });
                }))
            ])
        ]),

Answer 1

Roamer-1888 说得很对。这不能在 View 中完成。您有几种选择可以实现此目的:

首先是等待 Controller 中的结果:

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

另一个选项是创建 component为此，几乎会导致相同的代码接受它的封装。第三个选项是使用m.prop与为此推迟的 Mithril 一起。