javascript - kendo ui - 在另一个绑定(bind)中创建一个绑定(bind)？

Question

在寻求让关联数组起作用的绑定(bind)过程中，我已经取得了重大进展，但仍然受到一个特定问题的阻碍。

I do not understand how to create a binding from strictly javascript

这是一个 jsFiddle，它显示的详细信息比我在这里发布的更多:

jsFiddle

基本上，我想在显示的 $.each 函数中进行一个新的绑定(bind)，这相当于这个......

<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 绑定(bind)来创建它。

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

我们再次从关联数组开始。

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

令人震惊的是，找到要绑定(bind)的项目非常容易，这是到目前为止我的绑定(bind)；

$(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，但这不会执行剑道跟踪它的实际“绑定(bind)”。

Answer 1

我不太确定您要做什么，但在我看来，自定义“重复”绑定(bind)是不必要的。这就是我的想法。这与您想要做的事情相符吗？

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