Question

我有一个kendo-grid，我有一个自定义命令按钮，当我按下那个按钮我想打开一个新的kendo窗口然后用ajax调用去获取有关该产品的所有信息并填充几个不同的表格那个窗口。

这是我弹出窗口中的html。

    <div id="productinformation-form">
            <div class="form-group">
                <label for="id">Id</label>
                <input data-bind="value: id" type="text" class="form-control" id="id" />
            </div>
            <div class="form-group">
                <label for="unitmeasurement">Unit Measurement</label>
                <input data-bind="value: unitMeasurement" type="text" class="form-control" id="unitmeasurement" />
            </div>
            <div class="form-group">
                <label for="minorderqty">Unit Measurement</label>
                <input data-bind="value: minOrderQty" type="text" class="form-control" id="minorderqty" />
            </div>
            <div class="form-group">
                <label for="packsize">Pack Size</label>
                <input data-bind="value: packSize" type="text" class="form-control" id="packsize" />
            </div>
            <div class="form-group">
                <label for="leadTime">Lead Time</label>
                <input data-bind="value: leadTime" type="text" class="form-control" id="leadTime" />
            </div>
            <div class="form-group">
                <label for="generalaccessorycategoryid">General Accessory Categoryid</label>
                <input data-bind="value: generalAccessoryCategoryId" type="text" class="form-control" id="generalaccessorycategoryid" />
            </div>
            <div class="form-group">
                <label for="company">Company</label>
                <input data-bind="value: Company" type="text" class="form-control" id="company" />
            </div>
            <div class="form-group">
                <label for="weight">Weight</label>
                <input data-bind="value: Weight" type="text" class="form-control" id="weight" />
            </div>
            <div class="form-group">
                <label for="producttype">Product Type</label>
                <input data-bind="value: ProductType" type="text" class="form-control" id="producttype" />
            </div>
        </div>

以下是我获取上述视图的代码。

       var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var id = dataItem.id;
        var company = dataItem.Company;
        console.log(id);
        $.ajax({
            url: '@Url.Action("EditProductView", "Product")',
            type: 'POST',
            dataType: 'html',
            cache: false,
            success: function(data) {
                bindProductData(id, company, data);
            },
            error: function(xhr, error) {
            },
        });

以下是我获取有关我的产品的信息，然后尝试使用mvvm将其绑定到表单。

    function bindProductData(id, company, html) {
        bindProductInformation(id, company, html);
    }

      function bindProductInformation(id, company, html) {
        $.ajax({
            url: '@Url.Action("GetProductInformation", "Product")',
            type: 'POST',
            dataType: 'html',
            data: { id: id, company: company },
            cache: false,
            success: function (data) {
                $("#edit-product-window").kendoWindow({
                    modal: true
                });
                $("#edit-product-window").html(html);
                console.log("PRODUCT");
                console.log(data);
                //var viewModel = kendo.observable({
                //    id: data.id
                //});

                var window = $("#edit-product-window").data("kendoWindow");
                window.open();
                window.center();
                kendo.bind($("#productinformation-form"), data);
            },
            error: function (xhr, error) {
                console.log("ERROR");
            },
        });

在我的kendo.bind中，对象数据如下所示：

   {"id":"1068M","unitMeasurement":"1","minOrderQty":null,"packSize":null,"leadTime":null,"generalAccessoryCategoryId":null,"Company":"NORMSTAHL","Weight":null,"ProductType":1}

所以我认为它应该能够正确地绑定到表单。

编辑：如果我将我的代码更改为：

      var viewModel = kendo.observable({
                    id: "asdasd"
                });

                var window = $("#edit-product-window").data("kendoWindow");
                window.open();
                window.center();
                kendo.bind($("#productinformation-form"), viewModel);

它有效。然后它在表单中输入asdasd作为id。

但如果我使用帖子中的数据：

       var viewModel = kendo.observable({
                    id: data.id
                });

                var window = $("#edit-product-window").data("kendoWindow");
                window.open();
                window.center();
                kendo.bind($("#productinformation-form"), viewModel);

然后它不会输入它！

编辑2：如果我做一个console.log（数据），它会在控制台中显示整个对象。

但如果我执行console.log（data.id），即使数据显示对象包含id，它也会显示未定义。

                {"id":"1062M","unitMeasurement":"1","minOrderQty":null,"packSize":null,"leadTime":null,"generalAccessoryCategoryId":null,"Company":"NORMSTAHL","Weight":null,"ProductType":1}

Answer 1

根据您的上述评论，您的回复似乎是json string而不是object，这是由于您的AJAX请求规范data-type所在：

dataType （默认：智能猜测（xml，json，script或html））

您期望从中获取的数据类型   服务器。如果没有指定，jQuery将尝试根据它推断它   响应的MIME类型（XML MIME类型将产生XML，在1.4中   JSON将产生一个JavaScript对象，在1.4脚本中将执行   脚本，其他任何东西都将作为字符串返回。）

dataType: 'html'

将其更改为

dataType: 'json'

它应该有用。

AJAX documentation.

Answer 2

ajax调用的data参数是一个对象，而不是一个kendo可观察对象。

http://docs.telerik.com/kendo-ui/framework/mvvm/overview

要解决此问题，您应该创建一个viewmodel对象（如编辑中所示）

var viewmodel = kendo.observable({
    id: 0,
    unitMeasurement: '',
    minOrderQty: 0,
    //the rest of your properties
});

//bind the view model
$(function () {
    kendo.bind($('#productinformation-form'), viewmodel)
});

然后，如果您真的不想手动绑定属性，可以在数据对象上循环您的属性，例如（在您的ajax方法中）。

for (var property in data) {
    if (property in viewmodel)
        viewmodel[property] = data[property];
}

现在您可以找到其他管理方法，但是您现在可以扩展您的viewmodel（作为适当的MVVM模式）来处理事件，来源等。

使用这种方法还可以使用＆＃39; get＆＃39;和＆＃39;设置＆＃39; viewmodel上的方法。这些在使用源代码等时非常有用。您甚至可以将视图模型扩展为接受并在方法中对象并绑定自身，例如。

var viewmodel = kendo.observable({
    id: 0,
    unitMeasurement: '',
    minOrderQty: 0,
    //the rest of your properties

    bindToData: function (data) {
        for (var property in data) {
            this.set(String(property), data[property]);
        }
    }
});


///...ajax call
success: function(data){
    viewmodel.bindToData(data);
}

MVVM不绑定数据

2 个答案: