Принуждение компонента к перерисовке из другого компонента в Mithril.js

Question

У меня есть 2 компонента - addProjectForm и listProjects. Они представляют собой вложенные компоненты внутри корневого модуля. Всякий раз, когда я добавляю проект с использованием формы, я хочу, чтобы он сразу появился в списке.

Для достижения этой цели, я должен был пройти вниз экземпляр контроллера для каждого компонента, как это:

var RootComponent = {}; 

rootComponent.controller = function() { 
    this.example = 'test variable'; 
} 

rootComponent.view = function(ctrl) { 
    return [ 
      m.component(addProjectForm, ctrl), 
      m.component(listProjects, ctrl) 
    ]; 
} 

и затем listProjects компонент, например, выглядит следующим образом:

var listProjects = { 
    controller: function(root) { 
      this.root = root; 
    }, 
    view: function(ctrl) { 
      console.log(ctrl.root.example); 
    } 
}; 

Так что это Кстати, я продолжаю вызывать методы на верхнем уровне, но мне не совсем нравится передавать этот экземпляр контроллера таким образом. Есть ли другой способ, которым я должен это делать?

Answer 1

Я думаю, что это то, что вы ищете:

Mithril.js: Should two child components talk to each other through their parent's controller?

Свежую способ решения этой общей проблемы заключается в использовании Flux как архитектура, разработанная Facebook:

https://facebook.github.io/flux/

Написание собственного диспетчера является полулинейным. Вот пример того, что кто-то построил рядом Митрила:

https://gist.github.com/MattMcFarland/25fb4f0241530d2f421a

Недостатком этого подхода является то было бы несколько анти-Flux использовать m.withAttr, поскольку мнения не должны писать непосредственно в модели парадигма диспетчера.

Answer 2

Проблема, которую вы имеете, - это разница между передачей по ссылке или по значению. В JS все примитивные типы передаются по значению. Вот почему вы не можете передать строку напрямую, так как она клонирована во время прохождения. У вас есть несколько опций здесь:

Вы можете использовать m.prop и просто передать переменную вплоть до компонентов, m.props хранит значение в функции, которое всегда передается по ссылке.

var RootComponent = {}; 

rootComponent.controller = function() { 
    this.example = m.prop('test variable'); 

} 

rootComponent.view = function(ctrl) { 
    return [ 
      m.component(addProjectForm, ctrl.example), 
      m.component(listProjects, ctrl.example) 
    ]; 
} 

Если переменная является массивом, она будет передана по ссылке в любом случае.

Второй вариант - сохранить список в корневом контексте и добавить обратный вызов ко второму компоненту.

var RootComponent = {}; 

rootComponent.controller = function() { 
    var projects = this.projects = []; 
    this.addProject = function(project) { 
     projects.push(project); 
    } 

} 

rootComponent.view = function(ctrl) { 
    return [ 
     m.component(addProjectForm, { 
      onsubmit: ctrl.addProject 
     }), 
     m.component(listProjects, ctrl.projects) 
    ]; 
}