使用 Knockout Js 的 Ajax 數據綁定

Question

我正在使用淘汰賽 js ，我發現在 ajax get 方法中很難綁定數據，我已經創建了模型、viewModel 和 ajax 函數，我在創建 viewModel 的同一個 js 文件中有 ajax 方法我正在調用頁面加載上的ajax並嘗試將我的html與konckout js綁定，如果我在ajax調用之前，在ajax調用之后給出this.name = ko.observale(result[0].name) ，我會收到錯誤userModel is undefined它給出的name is undefined需要幫助

<html>
  <head>
    <script src="js/jquery1.9.js"></script>
    <script src="js/knockout-3.3.0.js"></script>
    <script src="js/knockout.mapping.js"></script>
    <script src="model/usermodel.js"></script>
  </head>

  <body>

    <div>
      <h1><span data-bind="text:user().name"></span></h1>
      <h1><span data-bind="text:user().userName"></span></h1>
    </div>
    <script src="ViewModel/userDetailsViewModel.js"></script>
  </body>
</html>

////Model////
function userModel(result) {
  var self = this;
  this.name = ko.observable(result[0].name); /// give me error undefined before  the ajax call and after ajax call i get the value in result
  this.userName = ko.observable();

}

/////View Model////
var result
var userDetailsViewModel = function(result) {
  self = this;
  self.user = ko.observable(new userModel(result));
};
var mainUserDetailsViewModel = new userDetailsViewModel(result);
ko.applyBindings(mainUserDetailsViewModel);

////ajax called on the page load ////
$.ajax({
  type: "POST",
  dataType: "json",
  url: baseUrl + 'api/xx/xxx',
  data: jason.strigfy(),
  success: function(data) {
    result = data;
    ////I am getting in result json data object 0=["name":"nnnn","Username":"mmmmmm"],
    ////  i am passing this result to ViewModel and to Usermodel Constructor//
    mainUserDetailsViewModel.user(new userModel(result));

  },
  error: function(error) {
    jsonValue = jQuery.parseJSON(error.responseText);
    //jError('An error has occurred while saving the new part    source: ' + jsonValue, { TimeShown: 3000 });
  }
});

Answer 1

這是我的建議，即擁有一個干凈的嵌套視圖模型。
示例： https : //jsfiddle.net/kyr6w2x3/28/

function UserViewModel() {
    var self = this;
    self.UsersList = ko.observableArray([]);

    self.GetUsers = function() {
      $.ajax({
        type: "POST",
        dataType: "json",
        url: baseUrl + 'api/xx/xxx',
        data: jason.strigfy(),
        success: function (data) {
            //Here you map and create a new instance of userDetailVM
            self.UsersList($.map(data, function (user) {
               return new UserDetailViewModel(user);
          }));
        }
      });
    }
   //call to get users list when the VM is loading or you can call it on any event on your model
   self.GetUsers();
}
function UserDetailViewModel(data){
    var self = this;
   self.Name = ko.observable(data.name);
   self.UserName = ko.observable(data.username);
}

ko.applyBindings(new UserViewModel());

看法：

 <h1 data-bind="foreach: UsersList">
    <div data-bind="text: Name"></div>
    <div data-bind="text: UserName"></div>
 </h1>

使用 Knockout Js 的 Ajax 數據綁定

問題描述

1 個解決方案

解決方案1
10 已采納 2016-08-03 15:07:15

使用 Knockout Js 的 Ajax 數據綁定

問題描述

1 個解決方案

解決方案1 10 已采納 2016-08-03 15:07:15

解決方案1
10 已采納 2016-08-03 15:07:15