Question

我正在尝试使用淘汰映射插件，但它没有将数据绑定到我的UI。以下是我的代码：

var model;

$(document).ready(function () {
$.ajax({
    type: "POST",
    url: SERVER_PATH + '/jqueryservice/DataAccessService.asmx/GetData',
    async: false,
    data: "{ }",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result, status) {
        model = ko.mapping.fromJS(result.d);
    },
    error: GetDataError

});

 });

 function GetDataError() {
     alert("System is not responding at the moment. Please try again.");
 }

任何人都可以让我知道我在这里做错了什么？以下是从服务器返回的数据：

{"ID":903,"Name":"Camela Holding","Email":"Camelah@yahoo.com",
   "Vehicles":[{"ID":1,"Name":"Van"},
               {"ID":2,"Name":"Car"},
               {"ID":4,"Name":"Cadillac"},
               {"ID":5,"Name":"Train"},                         {"ID":3,"Name":"Jeep"}],
   "OwnerVehicle":0,"WeeklyData":null,"Week1":null}

Answer 1

<table width="100%" class="mGrid" border="1">
  <tr>
    <th colspan="4">
    </th>
  </tr>
  <tr>
    <td style="width:15%;">Customer ID:</td>
    <td style="width:35%;" colspan="3"> 
      <input id="cusNo" maxlength="10" type="text" data-bind="value: ID" />
    </td>
  </tr>
  <tr>
    <td style="width:15%;">Email:</td>
    <td style="width:35%;"> 
      <input id="nic" maxlength="10" type="text" data-bind="value: Email" />
    </td>
    <td style="width:15%;">Name:</td>
    <td style="width:35%;"> <input id="name" maxlength="50" type="text" data-bind="value: Name"  />
    </td>
  </tr>      

  <tr>
    <td style="width:15%;">Vehicles:</td>
    <td style="width:35%;">
      <select id="status" data-bind="options:Vehicles, value:OwnerVehicle, optionsText: 'Name', optionsValue: 'ID'">
      </select>
    </td>
    <td style="width:15%;">Owner Vehicle:</td>
    <td style="width:35%;"> <input id="Text1" maxlength="50" type="text" data-bind="value: OwnerVehicle"  />
    </td>
  </tr>
</table>

这是我的小提琴，它显示了我在运行时得到的确切输出。

http://jsfiddle.net/N2G7w/

感谢一些帮助。

Answer 2

我能够在类似的情况下使这个修复工作，但我不知道它为什么以及如何工作的确切原因。

我试图使用淘汰映射插件绑定一个带有AJAX响应的observable，这是一个数组。

这是我最初做的事情：

   self.DataRows = ko.observableArray();
   $.ajax({
                url: '/Home/GetStudentList1',
                cache: false,
                type: 'post',
                data: self.GridParams,
                success: function (data) {                        
                    self.DataRows(ko.mapping.fromJS(data));
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log("error :" + XMLHttpRequest.responseText);
                    alert('There was an error in performing this operation.');
                }
            });

数据被映射到observable中，但UI没有更新，然后我尝试了这个

   $.ajax({
                url: '/Home/GetStudentList1',
                cache: false,
                type: 'post',
                data: self.GridParams,
                success: function (data) {
                    var observableData = ko.mapping.fromJS(data);
                    self.DataRows(observableData());
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log("error :" + XMLHttpRequest.responseText);
                    alert('There was an error in performing this operation.');
                }
            });

唯一的区别是我在将它与我的observable映射之前将它放在一个变量中同样在你的情况下，我认为你应该尝试类似的东西：

var self = this; //save reference to this as you will it in ajax success
self.model = ko.observable(); //create your observable
 $.ajax({
            type: "POST",
            url: SERVER_PATH + '/jqueryservice/DataAccessService.asmx/GetData',
            async: false,
            data: "{ }",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
        success: function (result, status) {
                 var data = ko.mapping.fromJS(result.d);// don't have any idea what is making knockout happy doing it this way?
                 self.model(data());
    },
        error: GetDataError

    });

在我执行console.log（DataRows（））的两种情况下，observable的结构都是相同的。

Answer 3

这里是我们问题的答案 -

试试这个

var model  = ko.observable();
$(document).ready(function () {
$.ajax({
      type: "POST",
      url: SERVER_PATH + '/jqueryservice/DataAccessService.asmx/GetData',
      async: false,
      data: "{ }",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
success: function (result, status) {
    model(ko.mapping.fromJS(result.d)()); //mapped using braces ()
},
error: GetDataError

   });

 });

请注意，这里唯一的区别是我让你的模型可观察而不是 model = ko.mapping.fromJS（result.d））; 我用了模型（ko.mapping.fromJS（result.d）（））;

我现在正在映射我的observable而不是将我的JSON对象映射到数组中。你必须意识到所有的observable都变成了函数，并且使用这些大括号“（）”来访问它们的值。

只是因为这个原因，当我将它带入一个单独的变量然后使用大括号访问它时它才起作用。

敲除映射插件的问题

3 个答案: