为什么kendo.observable不读取数据源

Question

你能解释一下为什么kendo ui observable在绑定到html时无法读取数据源吗？

我的代码基于这个示例：http://demos.telerik.com/kendo-ui/mvvm/remote-binding

我不明白dropdown和observable之间的联系。

InitObservable = function (Id) {
viewModel = kendo.observable({
    //create a dataSource
    tacheDataSource: new kendo.data.DataSource({
        autoSync: true,
        transport: {
            read: {
                url: function () {
                    return crudServiceBaseUrl + "/Taches?ID=" + Id;
                },
                method: "GET",
                dataType: "json"
            }
            ,
            update: {
                url: crudServiceBaseUrl + "/Taches",
                method: "PATCH",
                dataType: "json"
            }
            ,
            destroy: {
                url: crudServiceBaseUrl + "/Taches/Destroy",
                dataType: "json"
            }
            ,
            create: {
                url: crudServiceBaseUrl + "/Taches",
                method: "POST",
                dataType: "json"
            }
            ,
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return { models: kendo.stringify(options.models) };
                }
            }
        },
        batch: true,
        pageSize: 20,
        schema: {
            model: {
                id: "ID",
                fields: TacheFields
            }
        }
    }), // endDatasource
    selectedTache: null, //this field will contain the edited dataItem
    hasChange: false,
    save: function (e) {
        this.tacheDataSource.sync();
        this.set("hasChange", false);
    },
    remove: function () {
        if (confirm("Etes vous sûr(e) de vouloir supprimer cette tâche ?")) {
            this.tacheDataSource.remove(this.selectedTache);
            this.set("selectedTache", this.tacheDataSource.view()[0]);
            this.change();
        }
    },
    showForm: function () {
        return this.get("selectedTache") !== null;
    },
    change: function () {
        this.set("hasChanges", true);
    }//,
    //cancel: function () {
    //    this.dataSource.cancelChanges(); //calcel all the change
    //    validator.hideMessages(); //hide the warning messages
    //    $("#tacheWindow").data("kendoWindow").close();
    //}
});
kendo.bind($("#tacheWindow"), viewModel);
}

我单独使用datasource.read()测试了数据源，它工作正常。

读取数据源的触发器是什么？

-新细节

我添加了

type: "odata-v4"

在数据源中，我将模式更新为：

e
schema: {
            data:function(data){
                var toReturn = data.value;
                return toReturn;
            },
            model: {
                id: "ID",
                fields: TacheFields
            }
        }

这将强制使用read()

viewModel.selectedTache = proprietesEcranTache.tacheId;
if (viewModel.showForm()) {
    viewModel.tacheDataSource.read();
    kendo.bind($("#tacheWindow"), viewModel);
}

我在chrome的网络调试器中看到了我的答案，我知道我收到的数据格式没有错误，但没有数据显示。

下面是oData的答案

{
    "@odata.context":"http://localhost:14986/odata/$metadata#Taches","value":
    [
        {
        "ID":1,"Description":"D\u00e9marrage application","CreateurId":7,"TypeTacheID":1,"EtatTacheID":6,"ValidantId":null,"DateValidation":null,"EstValidee":false,"CommentaireValidation":null,"EvennementPrecedentID":null
        }
    ]
}

这是我的表格

<div id="tacheWindow">
<form id="TacheForm">
    <ul class="TacheFormFields">
        <li class="">
            <div class="formFieldTitle">Id</div>
            <div class="formFieldInput textField"><input id="tacheId" type="text" data-bind="value: ID" /></div>
        </li>
        <li>
                <div class="formFieldTitle">Type de tâche</div>
                <select id="typesTachesDdl" data-role="dropdownlist"
                        data-bind="value: TypeTacheID"
                        data-value-primitive="true"
                        data-text-field="Nom"
                        data-value-field="ID"></select>
            </li>
            <li>
                <div class="formFieldTitle">Description</div>
                <div class="formFieldInput textField">
                    <input type="text" data-bind="value: Description" />
                </div>
            </li>
            <li>
                <div class="formFieldTitle">Createur</div>
                <select id="CreateursDdl" data-role="dropdownlist"
                        data-bind="value: CreateurId"
                        data-value-primitive="true"
                        data-text-field="Nom"
                        data-value-field="ID"></select>
            </li>
            <li>
                <div class="formFieldTitle">Validant</div>
                <select id="ValidantsDdl" data-role="dropdownlist"
                        data-bind="value: ValidantId"
                        data-value-primitive="true"
                        data-text-field="Nom"
                        data-value-field="ID"
                        disabled="disabled"></select>
            </li>
    </ul>

    <div class="dialog_buttons">
        <button id="TacheFormTemplateSave" data-bind="click: observableSave" class="k-button">Ok</button>
        <button id="TacheFormTemplateSave" data-bind="click: observableCancel" class="k-button">Annuler</button>
    </div>
</form>

​

Answer 1

正如您已经注意到的，将数据源放在视图模型中只会使其可见，而不会有更多的变化。它只有在传递给kendo小部件(比如DropDownList)时才会被读取。telerik演示程序在绑定的html容器中显示了这一点：

<select data-role="dropdownlist" data-option-label="Select product"
        data-value-field="ProductID" data-text-field="ProductName"
        data-bind="source: productsSource, value: selectedProduct" style="width: 100%;"></select>

kendo.bind语句扫描html容器，查找具有data-role属性的元素。在上面的例子中，它将找到data-role=" DropDownList "，实例化一个DropDownList小部件，并为它添加必要的html元素到DOM。宣言的这一部分：

data-bind="source: productsSource"

...will在视图模型中搜索名为'productsSource‘的数据源，并将其分配给DropDownList作为其要使用的数据源。然后，DropDownList将触发对数据源读取，以便用数据填充其自身。

Answer 2

我创建了一个工作正常的简单示例

Home Page
<div id="editForm">
    <table>
        <tr>
            <td>Id</td>
            <td>Nom</td>
        </tr>
        <tr>
            <td>
                <input data-role="dropdownlist"
                       data-auto-bind="false"
                       data-text-field="Nom"
                       data-value-field="ID"
                       data-bind="value: selectedPerson,
                              source: persons,
                              visible: isVisible,
                              enabled: isEnabled,
                              events: {
                                change: onChange
                              }"
                       style="width: 200px;" />
            </td>
            <td><input type="text" data-value-update="displaySelectedPerson" data-bind="value: selectedPerson.Nom" class="k-textbox"  /></td>
        </tr>
    </table>
</div>

重要细节:在文本框中: data-bind="value: selectedPerson.Nom“

这允许observable更新字段。

Javascript：

var persons = [
    { ID: "1", Nom: "Lolo" },
    { ID: "2", Nom: "Toto" }
];

documentReady = function () {
    var viewModel = new kendo.observable({
        personsSource: persons
        , persons: new kendo.data.DataSource({
            data: persons,
            schema: {
                model: {
                    fields: {
                        ID: { type: "number" }
                        , Nom: { type: "string" }
                    }
                }
            }
        })
        , selectedPerson: null
        , hasChange : false
        , isPrimitive: false
        , isVisible: true
        , isEnabled: true
        , primitiveChanged: function () {
            this.set("selectedPerson", null);
        }
        , onChange: function () {
            console.log("event :: change (" + this.displaySelectedPerson() +          ")");
        }
        , displaySelectedPerson: function () {
            var selectedPerson = this.get("selectedPerson");
            return kendo.stringify(selectedPerson, null, 4);
        }
    });
    kendo.bind($("#editForm"), viewModel);
}