kendo ui - 在另一个绑定中创建绑定？

Question

为了让关联数组的绑定工作，我取得了重大进展，但仍被一个特定问题阻止。

  

我不明白如何从严格的javascript

创建绑定

这是一个jsFiddle，显示的详细信息比我在此处发布的更多：

jsFiddle

基本上，我想在显示的$.each函数中做一个新的绑定，它等同于...

<div data-template="display-associative-many" data-bind="repeat: Root.Items"></div>

变成了这个......

<div data-template="display-associative-single" data-bind="source: Root['Items']['One']"></div>
<div data-template="display-associative-single" data-bind="source: Root['Items']['Two']"></div>
<div data-template="display-associative-single" data-bind="source: Root['Items']['Three']"></div>

我正在使用repeat绑定来创建它。

由于我无法将绑定到关联数组，我只想使用绑定将所有绑定写入其中的对象。

我们再次使用关联数组。

var input = {
    "One" : { Name: "One", Id: "id/one" },
    "Two" : { Name: "Two", Id: "id/two" },
    "Three" : { Name: "Three", Id: "id/three" }
};

现在，我们创建一个包含该关联数组的viewModel。

var viewModel = kendo.observable({
   Name: "View Model",
   Root: {
      Items: input
   }
});

kendo.bind('#example', viewModel);

令人震惊的是，找到要绑定的项目非常简单，到目前为止这是我的绑定;

$(function(){
    kendo.data.binders.repeat = kendo.data.Binder.extend({
        init: function(element, bindings, options) {
            // detailed more in the jsFiddle

            $.each(source, function (idx, elem) {
                if (elem instanceof kendo.data.ObservableObject) {
                    // !---- THIS IS WHERE I AM HAVING TROUBLE -----! //
                    // we want to get a kendo template
                    var template = {};// ...... this would be $('#individual-item')
                    var result = {}; // perhaps the result of a template?
                    // now I need to basically "bind" "elem", which is
                    // basically source[key], as if it were a normal HTML binding
                    $(element).append(result); // "result" should be a binding, basically
                }
            });

            // detailed more in the jsFiddle
        },
        refresh: function() {
            // detailed more in the jsFiddle
        },
        change: function() {
            // detailed more in the jsFiddle
        }
    });
});

我意识到我可以写出HTML，但是这不会为kendo执行实际的“绑定”来跟踪它。

Answer 1

我不确定你要做什么，但在我看来，自定义“重复”绑定是不必要的。这就是我想出来的。这是否与你想要做的一致？

Here 是一个有效的jsFiddle示例。

<强> HTML

<div id="example">
  <div data-template="display-associative-many" data-bind="source: Root.Items"></div>
</div>

<script type="text/x-kendo-template" id="display-associative-many">
  #for (var prop in data) {#
  #  if (data.hasOwnProperty(prop)) {#
  #    if (data[prop].Id) {#
  <div><span>${data[prop].Id}</span> : <span>${data[prop].Name}</span></div>
  #    }#
  #  }#
  #}#
</script>

<强>的JavaScript

$(function () {
  var input = {
    "One" : { Name: "One", Id: "id/one" },
    "Two" : { Name: "Two", Id: "id/two" },
    "Three" : { Name: "Three", Id: "id/three" }
  };

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

  kendo.bind('#example', viewModel);
});