javascript - 我们如何使用 Mithril 处理包含子数组的数据模型？

Question

有没有一种简单的方法可以用 Mithril 来处理这种数据？

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

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

检索 getter/setter 中的 child.name() 值，但是:

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

未渲染。

有人可以向我解释一下出了什么问题吗？

Answer 1

这里的问题是，应该在 view 中生成子节点的匿名函数在执行 map 函数后没有返回任何内容。

只需添加一个返回即可使其工作:

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