Kendo ui 为“创建新剑道绑定”；“关联数组”；

我首先要说的是，我不知道这是否可行，但我正在阅读剑道UI文档，并试图找出如何至少尝试一下，但我在制作自定义绑定时遇到了很多困难。这是我正在研究的另一个问题的后续内容，该问题已发布。如果这不是一个合适的问题，请让我知道，我将关闭它或重新措辞。我现在真的很迷茫

据我所知，根据我被告知和尝试的情况，剑道不能绑定到关联数组，不是因为数据不好，而是因为它是一个对象数组，每个对象作为一个单独的实体-在正常情况下，数组会有点不同，并且包含长度属性，以及阵列原型中的一些其他函数，使迭代成为可能

所以我试着猜测如何避开这个问题。我成功地得到了我认为是一个可行的办法。我用“思考”作为开场白，因为我对Javascript还太缺乏经验，无法真正了解这样做的后果（性能、稳定性等）

这就是我所做的

剑道模板 html 标准是一个简单称为

\u associationKey

的属性。因此，从理论上讲，下面的方法是可行的

$.ajax({
   // get data from server and such.
}).done(function(results){
   // simple reference to the 'associative array' for easier to read code
   var associative = results.AssociativeArray;

   // this is a trait that everything in the 'associative array' should have to match
   // this is purely, purely an example. Obviously you would use a more robust property
   var match = "Id"; 

   // go through the results and wire up the associative array objects
   for(var key in associative ) {
      if(associative.hasOwnProperty(key) && associative[key].hasOwnProperty(match)) {
         associative[key]._associationKey = 10; // obviously an example value
      }
   }

   // a watered down example implementation, obviously a real use would be more verbose
   viewModel = kendo.observable({
      // property = results.property
      // property = results.property
      associativeArray = associative
   });

   kendo.bind('body', viewModel);
});

到目前为止，这似乎工作得很好，但我必须使用内联脚本在模板中硬编码逻辑。这正是我想要避免的

问题 最大的问题是我对telerik的定制绑定文档（可用）感到非常困惑。我确实有他们的例子可以借鉴，是的，但它如何与对象交互让我有点困惑。我会尽力解释的，但我太迷茫了，可能很难解释

这是telerik给出的自定义绑定示例，出于空间考虑，我对其进行了一些删减

<script>
    kendo.data.binders.repeater = kendo.data.Binder.extend({
        init: function(element, bindings, options) {
            //call the base constructor
            kendo.data.Binder.fn.init.call(this, element, bindings, options);

            var that = this;
            // how do we interact with the data that was bound?
        }
    });
</script>

---

作为一种更简单的解决方案，我建议将

关联数组

转换为

数组

。这非常简单，并且（在大多数情况下）可以解决您的问题

假设从服务器接收到以下关联数组：

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

它存储在名为

input

的变量中。将其从<代码>关联转换为无关联非常简单：

var output = [];
$.each(input, function(idx, elem) {
    elem.index = idx;
    output.push(elem);
});

现在，在

output

中有一个等效数组，我在其中为关联数组的每个元素将索引字段保存到名为

index

的字段中

现在，您可以使用现成的代码来显示从服务器接收的数据

请在此处查看它的实际操作：

您甚至可以使用KendoUI

DataSource

来检索和转换数据，方法如下：

var dataSource = new kendo.data.DataSource({
    transport: {
        read: ...
    },
    schema : {
        parse: function (response) {
            var output = [];
            $.each(response, function(idx, elem) {
                elem.index = idx;
                output.push(elem);
            });
            return output;
        }
    }
});

你的模型是：

var viewModel = new kendo.data.ObservableObject({
    Id: "test/id",
    Associative: dataSource
});

---

你可以在这里看到它的作用：

我不能说它是否可能，你离实现它还有多远，但我有一个（也许）更重要的问题：你（最终）想要实现什么？i、 e.最终目的是什么？您（最终）打算如何处理此

关联数组

？也许有一些使用开箱即用代码的解决方案。我的数据库中存储了数据，作为

I词典

，我需要将其取出并显示出来。反序列化时，这等同于关联数组。我正在尝试在不使用不同的存储形状重新构建整个程序的情况下绑定到它。Telerik技术支持部门表示，没有现成的解决方案，他们建议我进行绑定。请参阅我建议的答案。当然，它有一些局限性，但我认为探索这种方法可能是值得的。我并不完全反对这种做法，但在页面的其他部分，我需要能够使用关联数组特性按名称调用特定索引，以及执行大量“搜索”的过程这将极大地影响性能。不过，谢谢您。我会仔细阅读并试一试。如果您只需要使用关联数组进行访问，实际上这不是问题，因为我是如何将

input

复制到

output

中的，它们都指向内存中的同一对象。如果修改

输入[“一”].Name

实际上是在修改

输出[0]。Name

。唯一的问题是HTML没有更新。我今天无法回到电脑，但明天第一件事就是试试。如果这是真的，那么是的，这将是PerfectKendoUI团队成员，关联数组在JavaScript领域是一个非常陌生的概念。我强烈建议你重新思考你的方法，做一些更地道的事情。像

[{key:{Foo]，value:{…}，{key:{Bar]，value:{…}]

这样的简单构造就可以工作了，省去了所有的麻烦。

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

var output = [];
$.each(input, function(idx, elem) {
    elem.index = idx;
    output.push(elem);
});

var dataSource = new kendo.data.DataSource({
    transport: {
        read: ...
    },
    schema : {
        parse: function (response) {
            var output = [];
            $.each(response, function(idx, elem) {
                elem.index = idx;
                output.push(elem);
            });
            return output;
        }
    }
});

var viewModel = new kendo.data.ObservableObject({
    Id: "test/id",
    Associative: dataSource
});