MVVM 不绑定数据

Question

我有一个剑道网格，我有一个自定义命令按钮，当我按下该按钮时，我想打开一个新的剑道窗口，然后通过 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(data)，它会在控制台中显示整个对象。

但如果我执行 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

正如您上面的 cmets，您的响应似乎是 json string 而不是 object，这是由于您在此处的 data-type 的 AJAX 请求规范：

dataType（默认：Intelligent Guess（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

要解决这个问题，您应该创建一个视图模型对象（就像在您的编辑中一样）

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];
}

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

使用这种方法还可以在视图模型上使用“get”和“set”方法。这些在处理源等时非常有用。您甚至可以扩展您的视图模型以在方法中接受和对象并绑定自身。

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