Мифрил: визуализировать компонент на событии/динамически

Question

Попытка получить Мифры, не может понять одно. Могу ли я отображать компоненты на событиях?

Давайте предположим, что у меня есть один родительский компонент:

var MyApp = { 
    view: function() { 
     return m("div", [ 
      m.component(MyApp.header, {}), 
      m("div", {id: "menu-container"}) 
     ]) 
    } 

}; 

m.mount(document.body, megogo.main); 

Он визуализирует компонент заголовка (и заполнитель для меню (я даже это нужно)?):

MyApp.header = { 
    view: function() { 
     return m("div", { 
      id: 'app-header' 
     }, [ 
      m('a', { 
       href: '#', 
       id: 'menu-button', 
       onclick: function(){ 
        // this part is just for reference 
        m.component(MyApp.menu, {}) 
       } 
      }, 'Menu') 
     ]) 
    } 
} 

Когда пользователь нажимает на ссылку меню. Я хочу загрузить элементы меню из моего API и только затем отобразить меню.

MyApp.menu = { 
    controller: function() { 
     var categories = m.request({method: "GET", url: "https://api.site.com/?params"}); 
     return {categories: categories}; 
    }, 
    view: function(ctrl) { 
     return m("div", ctrl.categories().data.items.map(function(item) { 
      return m("a", { 
       href: "#", 
       class: 'link-button', 
       onkeydown: MyApp.menu.keydown 
      }, item.title) 
     })); 
    }, 
    keydown: function(e){ 
     e.preventDefault(); 
     var code = e.keyCode || e.which; 
     switch(code){ 
      // ... 
     } 
    } 
}; 

Эта часть будет, очевидно, не работает

onclick: function(){ 
    // this part is just for reference 
    m.component(MyApp.menu, {}) 
} 

Итак, вопрос: что такое правильный способ визуализации компонентов на событие?

Answer 1

Попробуйте: http://jsbin.com/nilesi/3/edit?js,output

Вы можете даже переключить меню.

И помните, что вы получаете обещание, завернутое в m.prop, из вызова m.request. Вам нужно будет проверить, что он вернулся до нажатия кнопки меню.

// I'd stick this in a view-model 
var showMenu = m.prop(false) 

var MyApp = { 
    view: function(ctrl) { 
     return m("div", [ 
      m.component(MyApp.header, {}), 
      showMenu() ? m.component(MyApp.menu) : '' 
     ]) 
    } 

}; 

MyApp.header = { 
    view: function() { 
     return m("div", { 
      id: 'app-header' 
     }, [ 
      m('a', { 
       href: '#', 
       id: 'menu-button', 
       onclick: function(){ 
        showMenu(!showMenu()) 
       } 
      }, 'Menu') 
     ]) 
    } 
} 

MyApp.menu = { 
    controller: function() { 
     //var categories = m.request({method: "GET", url: "https://api.site.com/?params"}); 
     var categories = m.prop([{title: 'good'}, {title: 'bad'}, {title: 'ugly'}]) 
     return {categories: categories}; 
    }, 
    view: function(ctrl) { 
     return m("div.menu", ctrl.categories().map(function(item) { 
      return m("a", { 
       href: "#", 
       class: 'link-button', 
       onkeydown: MyApp.menu.keydown 
      }, item.title) 
     })); 
    }, 
    keydown: function(e){ 
     e.preventDefault(); 
     var code = e.keyCode || e.which; 
     switch(code){ 
      // ... 
     } 
    } 
}; 

m.mount(document.body, MyApp); 

Answer 2

Прежде всего, вы захотите использовать возвращаемое значение m.component, либо вернув его с view, либо (более вероятно, что вы хотите) поместите его как дочерний элемент другого узла; используйте prop, чтобы узнать, открыт ли он в данный момент, и установите prop, если вы хотите его открыть.

Чтобы ответить на актуальный вопрос: по умолчанию Mithril инициирующего сам перерисовать, когда происходят такие события, как onclick и onkeydown, но чтобы вызвать перерисовку по своему усмотрению, вы хотите использовать либо m.redraw или m.startComputation/m.endComputation.

Разница между ними заключается в том, что m.redraw будет вызывать перерисовку как только это называется, в то время как m.startComputation и m.endComputation будет только вызывать перерисовку раз m.endComputation называется такое же количество времени, что m.startComputation было названо, так что вид ISN 't перерисовывается более одного раза, если несколько функций должны запускать перерисовку после их завершения.