Kendo UI MVVM 数据源绑定到 html 输入元素

Question

新手 kendo

kendo 数据源仅 returns 数组和我的 RESTful api returns 客户端作为一个元素的数组。

但是，我似乎无法将客户端的 'Name' 字段绑定到 html 输入框。

但是，如果我将数据放在 'ul' 中，我可以使用数据，如下面的代码所示。我知道 json 响应格式正确，因为我可以 console.log(obj[0].Name);

我试图 return obj[0] in the data: of the datasource 但这只是破坏了一切。（没有切片错误消息，因为它试图对数组进行切片）。

我敢肯定这很容易，但我一定只是想错了...

Html 和下面的 js:

<div data-role="view" data-title="Client Detail" data-model="app.clientView">

<!-- this does not work -->

<input data-bind="value: app.clientView.data"/>
<input data-bind="value: app.clientView.data[0].Name"/>
<input data-bind="value: app.clientView.data.Name"/>

<!-- this works -->

<ul data-role="listview" data-source="app.clientView.data" data-template="client-template"></ul> 

<script type="text/x-kendo-template" id="client-template">
    <a href="components/clientView/view.html?id=#: ID #">
        <div>#: Name #</div>
        <div>#: LastActivityOn #</div>
    </a>
</script>

app.clientView = kendo.observable({
    data: new kendo.data.DataSource({
        transport: {
            read: {
                url: app.uri + "clients/69", //+ id,
                type: "get",
                dataType: "json",
                beforeSend: function (req) {
                    req.setRequestHeader('X-authKey', app.key);
                }
            }
  },
        schema: {
         data: function (response) {
             console.log(response);
             var obj = $.parseJSON(response);
                console.log(obj[0].Name);
             return obj;
         }
        }
    })
});

Answer 1

Kendo UI MVVM value bindings cannot point to a Kendo UI DataSource instance. Only source 绑定可以做到这一点。

在您的情况下，修改您的实现并向 viewModel (app.clientView) 添加一些新字段，这些字段可用于值绑定。可以populate these fields after the DataSource instance receives its data.

附带说明一下，无需通过在绑定配置中包含 viewModel 引用来详细指定 viewModel 字段。您只需要那里的字段名称。检查 Kendo UI MVVM demos。

Kendo UI MVVM 数据源绑定到 html 输入元素

Kendo UI MVVM Datasource binding to html input element

mvvm

kendo-ui

kendo-datasource