我们如何处理包含带有秘银子阵列的数据模型？

Question

Is there an easy way with mithril to deal with that kind of data?

[
{"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"}
]

I'm tying to create a simple tree:

tree

and here's how I'm trying to deal with it:

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()) ])
                })
              }
            }()
          ])
        })
  ])
};

the model is well setted by the tree.ItemsList function. And all the childs are well populated with the corresponding m.prop functions

but

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()) ])
                })
              }
            }()
          ])
        })
  ])
};

the block

              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()) ])
                })
              }

Retrieve the child.name() value in the getter/setter but:

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

Is not rendered.

Can someone explain to me what's wrong?

Answer 1

The issue here is that the anonymous function that's supposed to generate the child nodes in the view is not returning anything after executing the map function.

Just adding a return makes it work:

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