KendoUI：无法将数据绑定到 JSON 文件中的 HTML 元素。

Question

我是 kendo ui 和 mvvm 的新手，我正面临这个问题：

我有一个以下格式的 JSON 文件：

[
{
"Id":1,
"img":"shoes.png"},
{"Id":2,
"img":"books.png"}
    }
]

我正在使用剑道人在线提到的示例读取文件，如下所示：

var crudServiceBaseUrl = "pro.json";
    var viewModel = kendo.observable({
            productsSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: crudServiceBaseUrl,
                        dataType: "json"
                    },
                    update: {
                        url: crudServiceBaseUrl,
                        dataType: "json"
                    },
                    destroy: {
                        url: crudServiceBaseUrl,
                        dataType: "json"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {
                                models: kendo.stringify(options.models)
                            };
                        }
                        return options;
                    }
                },
                batch: true,
                schema: {
                    model: {
                        id: "Id"
                    }
                }
            })
        });

        kendo.bind($("#form-container"), viewModel);

我能够将数据源中的数据绑定到 Kendo Control，例如下拉列表或其他 Kendo Control。但是当我尝试将数据绑定到 HTML 控件（主要是 img 标签）时。它停止工作并给出错误提示“this.parent”不是函数。

以下是有效的 HTML：

Select Product: <select data-role="dropdownlist" data-value-field="Id" data-text-field="img"
                         data-bind="source: productsSource"></select>

但是绑定到普通的<img> 标记不起作用。简而言之，我需要使用 kendo ui mvvm 将基于 src 值的图像绑定到 div。

请帮帮我。谢谢！！

- 哈迪克

Answer 1

目前 Kendo MVVM 无法将数据源绑定到 HTML 元素。只有 Kendo UI 小部件可以绑定到 kendo.data.DataSource。使用小部件，例如ListView 适用于DIV:

<div data-role="listview" 
     data-template="template"
     data-bind="source: productsSource">
</div>

<script id="template" type="text/x-kendo-template">
   <img data-bind="attr: { src: img }" />
</script>