javascript - Kendo UI MVVM 和关联数组的困难

Question

我很难将使用“关联数组”的 View 模型与 Kendo UI 的 MVVM 绑定(bind)在一起。我曾尝试将一个演示合并在一起，但当我什至没有一个半工作的演示时，这真的很难。但这是我所管理的最好的...这是我的代码，以及一个用于演示的 jsBin。它似乎不喜欢关联数组的想法，而且我不确定还有什么方法可以连接到它。

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

jsBin Demo

Javascript

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);

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>

更新

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

所以它像...一样存储在数据库中

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

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

虽然我确实有能力改变这一点，但这与程序的许多其他部分相反。软件中的许多不同地方已经在这是一本字典的前提下工作。所以我希望如果可能不必更改所有这些。如果那真的是实现这项工作的唯一方法，我会做出改变。

不过，我可以做的是在反序列化时做一些映射。我现在的想法是分配 key到一个新的属性，Name ，并尝试将剑道绑定(bind)到它。所以数据会变成，如果我的心理形象是正确的......

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

据我了解，应该可以对绑定(bind)进行建模……对吗？

更新2

按照我自己的想法，我用这种方法做了一个有点成功的版本……但是，我不完全确定这是否安全或有效。我越来越关注性能。我仍在努力寻找其他方法来实现这一结果。

剑道模板

<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/然后您可以将其包装到 Kendo ObservableObject 中。但是，这意味着它实际上并不是一个有长度的数组，因此您不能将它绑定(bind)到 Kendo ListView。

在我的脑海中，我能想到的将其表示为关联数组(对象)并将其绑定(bind)到 ListView 的唯一方法是将您的 ListView 绑定(bind)到一个函数，然后将您的对象转换为一个大批。不过跟踪更改变得有点奇怪......

---

回应您对原始帖子的评论和更新:

我在脑海中打字，所以如果你直接复制/粘贴它不起作用，我深表歉意，但假设你有一个数据源加载数据，你可以使用 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"
   }
]

然后您可以像往常一样将 MVVM 绑定(bind)到小部件。例如一个 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>