Javascript 剑道UI MVVM和关联数组的困难

我很难使用“关联数组”和KendoUI的MVVM绑定视图模型。我曾尝试将一个演示合并在一起，但当我连一个半工作的演示都没有的时候，真的很难做到。但这是我做的最好的。。。下面是我的代码，以及要演示的jsBin。它似乎不喜欢关联数组的概念，而且我也不确定还有什么其他方法可以加入它

之所以使用关联数组，是因为我从数据库中提取了很多细节，但在某些地方需要按名称调用它们。与编写一堆搜索/排序方法相比，关联数组要简单得多。但在一些我确实需要直接列出数据的地方，这给了我很多麻烦

Javascript HTML 显然还有更多的数据，但这是目前真正相关的所有数据

虽然我确实有能力改变这一点，但这与程序的许多其他部分相反。软件中的许多地方已经在作为字典的前提下工作了。因此，如果可能的话，我想避免改变所有这些。如果这真的，真的是唯一的办法，让这一切的工作，我会作出改变

但我能做的是在它反序列化时做一些映射。我现在的想法是将

键

分配给一个新属性

Name

，并尝试将剑道绑定到该属性。所以数据会变成，如果我的想象是正确的

Associative: [
   "One" : {
      Name: "One",
      Id: "id/one"
   },
   "Two" : {
     Name: "Two",
     Id: "id/two"
   },
   "Three" : {
     Name: "Three",
     Id: "id/three"
   }
]

如果我正确理解剑道的

可观察的
系统，那将使它

kendo.data.ObservableArray([
   kendo.data.ObservableObject,
   kendo.data.ObservableObject,
   kendo.data.ObservableObject
])

据我所知，应该可以对绑定进行建模。。。对吧?

更新2
按照我自己的想法，我用这种方法制作了一个有点成功的版本。。。然而，我不完全确定这是安全还是有效。我越来越关心他的表现。我仍在努力寻找其他方法来实现这个结果

剑道模板
html
首先，您的模板名称错误：

data-template="display-associaitive-many"
           id="display-associaite-many"


其次，JavaScript数组不是这样工作的

普通JS（不涉及剑道）：

关联数组应该表示为对象，然后可以将这些对象包装成一个Kendo
observateObject
。但是，这意味着它实际上不是一个具有长度的数组，因此不能将其绑定到Kendo ListView

在我看来，我能想到的将其表示为关联数组（对象）并将其绑定到ListView的唯一方法是将ListView绑定到一个函数，然后将对象转换为数组。但是跟踪变化会变得有点奇怪


回复您对原始帖子的评论和更新：

我是从头开始输入的，因此如果直接复制/粘贴它不起作用，我深表歉意，但假设您有一个数据源来存储数据，您可以使用
schema.parse
方法将数据转换为实际数组，如：

var _parseTheData = function (data) {
  var array = [];
  var item;
  for(var name in data) {
    item = data[name];
    item.Name = name;
    array.push(item);
  }
  return array;
};

var ds = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://wherever.com/theData"
    },
    schema: {
      parse: _parseTheData
    }
  }
});

其思想是，如果服务器返回了对象：

{
   "ONE" : {
      "Id" : "id/one"
   },
   "TWO" : {
      "Id" : "id/two"
   },
   "THREE" : {
      "Id" : "id/three"
   }
}

然后解析函数将其转换为数组：

[
   {
      "Id" : "id/one",
      "Name" : "ONE"
   },
   {
      "Id" : "id/two",
      "Name" : "TWO"
   },
   {
      "Id" : "id/three",
      "Name" : "THREE"
   }
]

然后，您可以将它绑定到一个类似于普通的小部件。例如，ListLiew：

<div data-role="listview"
     data-bind="source: ds"
     data-template="item-template"></div>

<script id="item-template" type="text/x-kendo-template">
    <div data-bind="text: Name"></div>
    <div data-bind="text: Id"></div>
</script>


谢谢您的关注。我的实际代码库有正确的拼写，我只需要得到一个jsbin来显示问题，所以我忽略了它。更详细地说，数据存储在
RavenDB
中，作为
I词典
，其中
T
是一个特定的接口。我需要对其进行反序列化，并通过剑道ui mvvm将其显示在屏幕上。虽然我可以将其转换为普通数组，但这不是所需的。但是，我可以将
键
分配给数组中每个项的新属性
名称
。如果我这样做，动态会发生变化吗？这会使它成为可能吗？如果它不再依赖于顶级部件的键名，我已经更新了我的问题，并提供了更多详细信息来尝试解释这一点。我很抱歉一开始的信息太差。昨天，我在这里真的不是很理智，如果不是的话，是否可以在模板中使用内联脚本？例如迭代ObservalArray中的每个对象？这可能有帮助，也可能没有帮助，但我有一篇关于绑定到返回不同数据集的函数的博文：在您的情况下，如果您需要绑定到所有技能的列表，我会在您的ViewModel上创建一个函数，返回一个迭代属性的数据源（技能）并将其返回到新数组或数据源中。
data-template="display-associaitive-many"
           id="display-associaite-many"

var array = [];
array["One"] = { Id: "id/one" };
array["Two"] = { Id: "id/two" };
array["Three"] = { Id: "id/three" };

array; // prints "[]"
array.length; // prints 0

var _parseTheData = function (data) {
  var array = [];
  var item;
  for(var name in data) {
    item = data[name];
    item.Name = name;
    array.push(item);
  }
  return array;
};

var ds = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://wherever.com/theData"
    },
    schema: {
      parse: _parseTheData
    }
  }
});

{
   "ONE" : {
      "Id" : "id/one"
   },
   "TWO" : {
      "Id" : "id/two"
   },
   "THREE" : {
      "Id" : "id/three"
   }
}

[
   {
      "Id" : "id/one",
      "Name" : "ONE"
   },
   {
      "Id" : "id/two",
      "Name" : "TWO"
   },
   {
      "Id" : "id/three",
      "Name" : "THREE"
   }
]

<div data-role="listview"
     data-bind="source: ds"
     data-template="item-template"></div>

<script id="item-template" type="text/x-kendo-template">
    <div data-bind="text: Name"></div>
    <div data-bind="text: Id"></div>
</script>