使用jQuery dynatree与淘汰赛和微风

Question

OK，下面由PW喀我从这里开始对问题ID分裂的问题，这部分关闭的建议17973991.

我有利用内置一个DataContext一个视图模型微风轻拂，它提取我想要的数据并填充可观察数组。我有要求使用已经由Breeze检索到的数据填充另一个（可观察）数组以在树视图中使用。

由于现有数据没有正确的字段名，我需要能够使用dynatree/fancytree插件可以使用的正确字段名创建新数组。

我第一次尝试：（！后来证明不工作，所以不这样做）

所以在我的视图模型我加在.js文件的顶部如下：

var treeMaterials = ko.observableArray(); 

var treeMaterial = function (data) { 
    var self = this; 

    self.name = ko.observable(data.name); 
    self.id = ko.observable(data.id); 
    self.children = ko.observableArray(); 

    $.each(data.children, function (index, item) { 
     self.children.push(new Person(item)); 
    }); 
}; 

然后我添加了一个“asTreeMaterials”的方法来我的模块：

var asTreeMaterials = function (treeMatsObservable, matsObservable) { 
    treeMatsObservable([]); //clear out array as we're rebuilding it in here 
    var tmpArray = treeMatsObservable(); //create local temp array to avoid ko notifications on each push 

    $.each(matsObservable, function (index, mat) { 
     tmpArray.push(new treeMaterial({ 
      id: mat.id, 
      name: mat.materialName, 
      children: [] 
     })); 
    }); 

    treeMatsObservable(tmpArray); 
}; 

（约翰爸爸的大量举债编码还有，感谢约翰！） 注：会有更多的代码进入在“孩子”位一旦我有工作

最后改变“激活”的方法来使用新方法的基础知识：

var activate = function() { 
    // go get local data, if we have it 
    return datacontext.getMaterialPartials(materials), 
      asTreeMaterials(treeMaterials, materials); 
}; 
.... 

，然后从模块返回新的数组：

var vm = { 
    activate: activate, 
    materials: materials, 
    treeMaterials: treeMaterials, 
    title: 'My test app page 1', 
    refresh: refresh 
}; 

意味着我不再为数据的树视图版本再次命中服务器。

编辑2. 继从PW喀对其他问题的指导意见（将被添加到这个问题不久）我已经修改了“asTreeMaterials”的方法如下：

var asTreeMaterials = function() { 
    treeMaterials([]); //clear out array as we're rebuilding it in here 
    var matArray = materials().slice(); 
    var tmpArray = []; 

    $.each(matArray, function (index, mat) { 
     tmpArray.push(new treeMaterial({ 
      id: mat.id, 
      name: mat.materialName, 
      children: [] 
     })); 
    }); 

    treeMaterials(tmpArray); 
}; 

的原因（我认为）我必须创建一个单独的新数组，即现有的“材料”observable，我切片不包含正确的属性。 Dynatree/fancytree需要（除其他外）“ID”和“名称”。我有ID，但在材料observable中有“materialName”，因此通过切片材质observable创建的数组上的“$ .each”将“materialname”属性推入新数组中的“name”属性（tmpArray）。我对这一切都很陌生，在这里我可能会远离标志！

我真的需要一个可观察数组吗？如果我了解可观察阵列的用途，我不认为我会这样做......我的材料几乎是一成不变的，而且很少会发生改变。我认为我可以简单地将“treeMaterials”作为一个标准的javascribt对象数组，并将其返回到viewmodel而不是将其作为observableArray？

无论采用哪种方法，目前materialname和ID的值都不会传入我正在创建的tmpArray中的相关属性。相反，我从可观察材料中获得函数，所以我认为我需要用某种“解包”来处理实际值。

Answer 1

您没有填充treeMaterials，因为您将它发送到asTreeMaterials时没有任何材料数据。我在这里做一些假设，但基本上它看起来像这就是你正在尝试做的 -

在您的视图模型的顶部，我假设你有两个observableArrays

var treeMaterials = ko.observableArray(); 
var materials = ko.observableArray(); 

为您激活方法，你需要去得到一些数据，然后当你的DataContext返回一个承诺，请让一棵树出来的一些对象类型 -

var activate = function() { 
    return datacontext.getMaterialPartials(materials).then(
      makeMyTree); 
}; 

你并不需要通过treeMaterials或材料，因为它们是内已经是视图模型的范围了，你就是试图从你的材料中制作出一个对象树。

var makeMyTree = function() { 
    treeMaterials([]); 
    ko.utils.arrayForEach(materials(), function (mat) { 
     treeMaterials.push(new treeMaterial(mat)); 
    }); 
}; 

这将会使可观察性对象的observableArray，如果将它们或试图让自己的价值，你就需要使用像treeMaterials（）[0]。名称（）的意思。

如果您dynatree不采取可观，或者不跟他们玩好

我不知道你的dynatree或W/E如何与观测，所以这里是一个标准的数组不可观察的物体，而不是可观察的阵列 -

var treeMaterials = []; 

var makeMyTree = function() { 
    treeMaterials[]; 
    ko.utils.arrayForEach(materials(), function (mat) { 
     treeMaterials.push(new treeMaterial(mat)); 
    }); 
}; 

var treeMaterial = function (data) { 
    var self = this; 

    self.name = data.name; 
    self.id = data.id; 
    self.children = []; 

    $.each(data.children, function (index, item) { 
     self.children.push(new Person(item)); 
    }); 
};