祕銀 - 重新提供動態內容

Question

我想在我的延期對象返回數據後重新呈現我的DOM elemnets。我在控制檯上調試它，看起來我的元素正在創建，但它從不顯示到頁面。如果我添加靜態內容，它會按預期工作。

 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

我不知道祕銀，但會猜測承諾不能用於這種方式。

從承諾的第一原則，將整個m()表達式換成promise.then(...)會更有意義。換句話說，在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有一個機制rendering before web service requests finish，這可能與此處有關。

Answer 2

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

另一種選擇是創建此其在相同的代碼幾乎結果接受component它被封裝。第三種選擇是使用m.prop連同爲此而擊敗的天使。