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

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

检索 getter/setter 中的 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()) ])
        })
    }
}()

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

How can we deal with a data model containing child array with mithril?

javascript

mithril.js