Kendo UI MVVM和关联数组的困难 [英] Difficulty with Kendo UI MVVM and an Associative Array

问题描述

我很难用Kendo UI的MVVM使用关联数组"绑定视图模型.我曾尝试过将一个演示合并在一起，但是当我连一个半工作的演示都没有时，这真的很难.但这是我所管理的最好的...这是我的代码，以及一个jsBin来演示.它似乎似乎并不喜欢关联数组的概念，而且我还不确定如何将其插入其中.

I am having a difficult time binding a view model using an "Associative Array" with Kendo UI's MVVM. I've attempted to amalgamate a demo together, but it is really hard to when I don't have even a half-working one to go off of. But this is the best I've managed... Here is my code, along with a jsBin to demonstrate. It just doesn't seem to like the idea of an associative array, and I'm not really certain how else to hook into it.

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

The reason for the associative array is because I am pulling a lot of details out of the database, but they'll need to be invoked in certain places by name. Rather than write a bunch of searching/sorting methods, an associative array is a lot simpler for this. But in a few places where I do need to just list the data outright, it is giving me a great deal of trouble.

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>

更新

我需要绑定的数据以IDictionary<string, T>的形式存储在RavenDB中，其中T是一种特定的对象(它有时会有所不同，因此我无法为您提供具体的类型-也不相关)

Update

The data I need to bind to is stored in RavenDB as an IDictionary<string, T>, where T is a specific kind of object (it kind of varies at times, so I can't give you a concrete type - nor is it really relevant)

因此它像...一样存储在数据库中

So it is stored in the database like ...

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

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

Obviously there is more data than this, but this is all that is truly relevant at the moment.

虽然我确实有改变这一点的身体能力，但这与程序的许多其他部分相反.在这本词典的前提下，软件中的许多地方都已经在工作.因此，我喜欢，如果可能的话，避免不得不更改所有 .如果那确实是使这项工作真正可行的唯一方法，那么我将进行更改.

While I do have the physical ability to change this, it is contrary to many other parts of the program. A lot of various places in the software work already on the premise of this being a dictionary. So I would like to avoid having to change all of that if possible. If that is truly, truly the only way to make this work at all, I will make the change.

我可以做的是在反序列化时进行一些映射.我现在的想法是将key分配给新属性Name，并尝试kendo绑定到该属性.因此，如果我的心理形象正确的话，数据就会变成...

What I could do though is do some mapping when it deserializes. My thought now is to assign the key to a new property, Name, and try to kendo bind to that. So the data would become, if my mental image is right ...

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

如果我理解Kendo的observable系统权利，那就可以了...

If I understand Kendo's observable system right, that would make it ...

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

据我所知，应该可以建模绑定...对吗?

And as I grasp it, that should be possible to model bind ... right?

按照我自己的想法，我已经使用这种方法使某种程度上的版本成功了.但是，我不确定这是安全还是有效的.我越来越担心这种表现.我仍在尝试寻找其他方法来达到此效果.

Following my own idea, I have made a somewhat successful version work with this method... However, I am not entirely sure if this is safe or efficient. I am growing concerned with the performance. I'm still trying to find other ways to achieve this result.

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

推荐答案

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

First, Your template name is wrong:

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

---

第二，JavaScript数组不能那样工作.

---

Second, JavaScript arrays don't work like that.

普通JS(不涉及剑道):

Plain JS (no Kendo involved):

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中.但是，这意味着它实际上并不是一个具有长度的数组，因此您无法将其绑定到Kendo ListView.

Associative arrays should be represented as objects http://www.laurencegellert.com/2012/01/associative-arrays-in-javascript/ which you can then wrap into a Kendo ObservableObject. However, that means it isn't really an array with a length, so you can't bind it to a Kendo ListView.

在我的头顶上，我想到将其表示为关联数组(对象)并将其仍绑定到ListView的唯一方法是将ListView绑定到一个函数，该函数随后将您的对象转换为大批.但是，跟踪更改变得有些奇怪...

Off the top on my head, the only way I can think of to represent that as a associative array (object) and still bind it to a ListView would be to bind your ListView to a function that then translates your object to an array. Tracking changes gets a little weird then though...

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

In response to your comments and updates to the original post:

我是在头顶上键入此内容，因此如果您直接复制/粘贴它不起作用，我深表歉意，但是假设您有一个DataSource对数据进行修饰，则可以使用schema.parse方法将您的数据转换为实际的数组，例如:

I'm typing this off the top of my head, so my apologies if it doesn't work if you directly copy/paste it, but assuming you have a DataSource laoding the data, you could use the schema.parse method to turn your data into an actual array, like:

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

这个想法是，如果您的服务器返回了该对象:

The idea is that if your server returned the object:

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

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

Then the parse function would convert it to the Array:

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

然后您可以将MVVM像普通的那样绑定到小部件.例如ListLiew:

Which you can then MVVM bind to a widget like normal. For example a 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>

这篇关于Kendo UI MVVM和关联数组的困难的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！