Как мы можем работать с моделью данных, содержащей дочерний массив с mithril?

Question

Есть ли простой способ с мифрилом справиться с такими данными?

[ 
{"type" : "folder", "name" : "Folder1", "childs" : [ 
    {"type": "file", "name" : "Folder1_File1"}, 
    {"type": "file", "name" : "Folder1_File2"} 
]}, 
{"type": "file", "name" : "File1"}, 
{"type": "file", "name" : "File2"}, 
{"type": "folder", "name" : "Folder2"} 
] 

Я завязывания создать простое дерево:

tree

и вот как я пытаюсь справиться с ней:

var tree = {}; 

//for simplicity, we use this component to namespace the model classes 

//the Todo class has two properties 
tree.Item = function(data) { 
    this.type = m.prop(data.type); 
    this.name = m.prop(data.name); 
    this.childs = m.prop(data.childs); 
}; 

//the TodoList class is a list of Todo's 
tree.ItemsList = function() { 
    return m.request({method: "GET", url: "/tree/tree.json"}).then(function(data){ 
    out = [] 
    data.map(function(v, k){ 
     out[k] = new tree.Item(data[k]) 
     if (typeof(out[k].childs()) != "undefined"){ 
     out[k].childs().map(function(V, K) { 
      out[k].childs()[K] = new tree.Item(data[k].childs[K]) 
     }) 
     } 
    }) 
    //console.log(out) 
    return out 
    }) 
} 

//the view-model tracks a running list of trees, 
//stores a type for new trees before they are created 
//and takes care of the logic surrounding when adding is permitted 
//and clearing the input after adding a tree to the list 
tree.vm = (function() { 
    var vm = {} 
    vm.init = function() { 
     //a running list of trees 
     vm.list = new tree.ItemsList() 

     //a slot to store the name of a new tree before it is created 
     vm.type = m.prop(""); 
     vm.name = m.prop(""); 
     vm.childs = m.prop([]); 

     vm.load = function(item) { 
     }; 
    } 
    return vm 
}()) 

//the controller defines what part of the model is relevant for the current page 
//in our case, there's only one view-model that handles everything 
tree.controller = function(args) { 
    tree.vm.init() 
} 

//here's the view 
tree.view = function(ctrl, args) { 
    return m("ul", { "class" : "tree", "id": "tree"}, [ 
    tree.vm.list().map(function(item) { 
      return m('li', {class: item.type()}, [ 
      item.name(), 
      function(){ 
       //console.log(item.childs()) 
       if (typeof(item.childs()) != "undefined"){ 
       //console.log(item.childs()) 
       item.childs().map(function(child){ 
        console.log(child.name()) 
        return m('ul', [ m('li', {class: child.type()}, child.name()) ]) 
       }) 
       } 
      }() 
      ]) 
     }) 
    ]) 
}; 

модель хорошо выставиться через функцию tree.ItemsList. И все Чайлдс хорошо заполняются соответствующими функциями m.prop

но

tree.view = function(ctrl, args) { 
    return m("ul", { "class" : "tree", "id": "tree"}, [ 
    tree.vm.list().map(function(item) { 
      return m('li', {class: item.type()}, [ 
      item.name(), 
      function(){ 
       //console.log(item.childs()) 
       if (typeof(item.childs()) != "undefined"){ 
       //console.log(item.childs()) 
       item.childs().map(function(child){ 
        console.log(child.name()) 
        return m('ul', [ m('li', {class: child.type()}, child.name()) ]) 
       }) 
       } 
      }() 
      ]) 
     }) 
    ]) 
}; 

блок

   if (typeof(item.childs()) != "undefined"){ 
       //console.log(item.childs()) 
       item.childs().map(function(child){ 
        console.log(child.name()) 
        return m('ul', [ m('li', {class: child.type()}, child.name()) ]) 
       }) 
       } 

Получить значение child.name() в геттерного/сеттера, но:

return m('ul', [ m('li', {class: child.type()}, child.name()) ]) 

Не отображается.

Может кто-нибудь объяснить мне, что случилось?

Answer 1

Проблема в том, что анонимная функция, которая должна генерировать дочерние узлы в view, ничего не возвращает после выполнения функции map.

Просто добавив return делает его работу:

function(){ 
    if (typeof(item.childs()) != "undefined"){ 
     return item.childs().map(function(child){ 
      return m('ul', [ m('li', {class: child.type()}, child.name()) ]) 
     }) 
    } 
}()