剑道UI MVVM和关联数组困难

Question

我有一个困难的时间绑定视图模型使用"关联数组"与剑道UI的MVVM。我曾经尝试过整合一个demo，但是当我还没有一个半成品的时候，这真的很难。但这是我做到的最好的…下面是我的代码，以及一个jsBin来演示。它似乎不喜欢关联数组的概念，而且我真的不确定如何与它挂钩。

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

<标题> jsBin演示h1> Javascript h1> HTML

<div data-bind="text: Id"></div>
<div data-template="display-associative-many" data-bind="source: Associative"></div>
<script type="text/x-kendo-template" id="display-associaite-many">
  <div>
    ${ data.Id }
  </div>
</script>

<标题> 更新

我需要绑定的数据存储在RavenDB作为IDictionary<string, T>，其中T是一种特定类型的对象(它有时会有所不同，所以我不能给你一个具体的类型-也不是真的相关)

所以它被存储在数据库中，像…

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

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

虽然我确实具有改变这一点的物理能力，但这与程序的许多其他部分是相反的。软件中很多地方的工作都是以字典为前提的。因此，如果可能的话，我希望可以避免更改所有的。如果这真的是唯一可行的办法，我会做出改变。

我能做的是在反序列化时做一些映射。我现在的想法是将key分配给一个新的属性，Name，并尝试将剑道绑定到此。所以数据会变成，如果我的脑海里的图像是正确的…

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

如果我对剑道的observable系统理解正确的话，那会使它…

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

正如我所掌握的，应该可以建模绑定…对吧?

<标题>更新2 h1> 点成功的版本…然而，我不完全确定这是否安全或有效。我越来越关心演出了。我仍在努力寻找其他方法来达到这个结果。

剑道模板

<script type="text/x-kendo-template" id="display-items-many">
        # for(var key in data) { #
        #   if (data.hasOwnProperty(key) && data[key].hasOwnProperty("Id")) { #
        <tr>
            <td>
                <strong>#= data[key].Id #</strong>
            </td>
            <td class="text-right">
                <code>#= data[key].Total #</code>
            </td>
        </tr>
        #   } #
        # } #
</script>

html

<table class="table borderless table-hover table-condensed" data-bind="source: Associative  data-template="display-items-many">
</table>

Answer 1

首先，您的模板名称错误:

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

---

第二，JavaScript数组不是这样工作的。

纯JS(不涉及剑道):

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

关联数组应该表示为对象http://www.laurencegellert.com/2012/01/associative-arrays-in-javascript/，然后您可以将其包装成剑道ObservableObject。然而，这意味着它并不是一个真正具有长度的数组，所以你不能将它绑定到一个Kendo ListView。

在我的头上，我能想到的唯一的方法来表示，作为一个关联数组(对象)，仍然绑定到一个ListView将绑定到一个函数，然后把你的对象转换成一个数组。然而，跟踪更改变得有点奇怪…

---

回复您对原帖的评论和更新:

我在我的头上键入这个，所以我的道歉，如果它不工作，如果你直接复制/粘贴它，但假设你有一个数据源加载的数据，你可以使用schema.parse方法把你的数据变成一个实际的数组，如:

var viewModel = new kendo.data.ObservableObject({
  Id: "test/id",
  Associative: new kendo.data.ObservableArray([])
});
var array = viewModel.get("Associative");
array["One"] = { Id: "id/one" };
array["Two"] = { Id: "id/two" };
array["Three"] = { Id: "id/three" };
kendo.bind('body', viewModel);

0这个想法是如果你的服务器返回对象:

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

你可以像平常一样MVVM绑定到一个小部件。例如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>