MithrilJS: маршрутизация компонента внутри компонента верхнего уровня

Question

Я только начал читать о Мифриле. Увлекательно .. Только одно, что меня озадачивает после первого чтения.

Как я могу маршрутизировать один компонент внутри другого (компонент верхнего уровня)? Я имею в виду, как мне подражать угловым или угловым выходам?

Я понимаю, что я могу получить m.route для присоединения компонентов к любому dom-узлу. Но как я могу отобразить приложение верхнего уровня App, которое генерирует m («# view») между прочим, а затем все другие маршрутизируемые компоненты входят в div #view приложения App? Это возможно? В противном случае я должен повторно включать заголовок и нижний колонтитул с каждым переходом маршрута в подкомпонент, правильно? Я что-то упускаю?

спасибо.

Answer 1

В противном случае я должен повторно включать верхний и нижний колонтитулы с каждым переходом маршрута в подкомпонент, правильно? Я что-то упускаю?

Я не думаю, что вам что-то не хватает. Мифрил имеет как можно больше магии, поэтому трудно пропустить что-то. Тем не менее, это все еще более удобно, чем рамки с магией.

Я просто переношу свои представления в функцию шаблона. Я ленивый парень, но даже я не против этого, потому что он гибкий и не путающий.

http://codepen.io/farzher/pen/vOjjEB

function viewTemplate(content) { 
    return function() {return [ 
    m('#header', [ 
     'my site', 
     m('a', {config:m.route, href:'/'}, 'home'), 
     m('a', {config:m.route, href:'/1'}, 'page 1'), 
     m('a', {config:m.route, href:'/2'}, 'page 2'), 
    ]), 
    m('hr'), 

    m("#view", content), 

    m('#footer', 'copyright my site'), 
    ]} 
} 

component1 = { 
    view: viewTemplate([ 
    m('h1', 'component 1 page') 
    ]) 
} 

component2 = { 
    view: viewTemplate([ 
    m('h1', 'component 2 page') 
    ]) 
} 

m.route(document.body, '/', { 
    '/': {view: viewTemplate()}, 
    '/1': component1, 
    '/2': component2, 
}) 

Answer 2

я в конечном итоге происходит с по предложений Лео, я обнаружил вокруг прибегая к помощи.

У меня есть только однослойный обертыватель и не имеет названных точек с этим решением, но он работает и выполняет эту работу.

В конце дня Угловой имеет только один нг-вид, и люди каким-то образом обходятся.

Так что это внешний компонент.

var Layout = { 
    controller(subcomp) { 
    this.own = { 
     slide: false 
     }; 
    this.subctrl = new subcomp.controller(); 
    this.subview = subcomp.view; 
    }, 
    view(ctrl) { 
    return bubble(ctrl.own, ctrl.subview(ctrl.subctrl)); 
    }, 
    wrap(routes) { 
    var map = {}; 
    Object.keys(routes).map((r) => { 
     map[r] = { 
     controller() { 
      return new Layout.controller(routes[r]); 
     }, 
     view: Layout.view 
     }; 
    }); 
    return map; 
    } 
}; 

Это внешний вид, в который вы вставляете свой компонент.

function bubble(vm, subview) { 
    return m("main", [ 
    m("#outlet",[ subview ]) 
    ]); 
} 

И затем вы направляете все свои подкомпоненты внутри макета.

m.route.mode = "pathname"; 
m.route(document.body, "/articles/create", Layout.wrap({ 
    "/articles/create": CreateArticle 
})); 

Надеюсь, это поможет кому-то в той же ситуации.

Answer 3

Я попробовал несколько решений:

1. С m.component для обработчика маршрута - http://jsfiddle.net/0xwq00zm/1/
2. с внутренним способе App компонента, который описывает внутреннюю составляющую.Это несколько лучше, потому что я в состоянии передать состояние Aplication к другим компонентам - http://jsfiddle.net/0xwq00zm/11/
3. С помощью простой функции внешней, что оборачивает внутренний компонент с другими элементами - http://jsfiddle.net/0xwq00zm/12/

Более или менее сложным - с все они у меня есть ощущение, что приложения перерисовывают себя, а не только внутренний компонент.

Просто выберите все элементы - Ctrl+A в области результатов в JsFiddle - и затем перейдите. Это виртуальный DOM, и он не должен повторно отображать все, но со всеми решениями выше - это происходит.

(я пробовал и с context.retain = true; на несколько частей, но все же после нескольких навигаций я добраться до точки, где не получает выбранный ничего.)

========

Надежда эти варианты помогите кому-то ... но также - я буду рад увидеть решение полного повторного рендеринга.