Knockout JS binde das Ajax-Ergebnis

Question

Ich bin neu zu Knockout JS, ich versuche, die Ajax-Ergebnisdaten an Knockout JS Viewmodel zu binden, aber ich bin mit dem Problem konfrontiert, während die Daten zu binden, ich habe Modell und Viewmodel erstellen und Ich bekomme das Ergebnis von Ajax. Brauche Hilfe.

Unten ist mein Code:

// ajax on page load/// 
$.ajax({ 
    type: "POST", 
    dataType: "json", 
    url: baseUrl + 'api/xxx/xxx', 
    data: UserProfileModel, 
    success: function(data) { 
     result = data; 
     ////view model//// 
     userDetailsViewModel(result); 
    }, 
    error: function(error) { 
     jsonValue = jQuery.parseJSON(error.responseText); 
     //jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 }); 
    } 
}); 

//// view model/// 
var userDetailsViewModel = function(result) { 
    console.log(result); 
    self = this; 
    self.user = ko.observable(new userModel(result)); 
}; 

$(document).ready(function() { 
    ko.applyBindings(userDetailsViewModel()); 
}); 

/// Model//// 
function userModel(result) { 
    this.name = ko.observable(); 
    this.userName = ko.observable(); 
} 

Answer 1

1. Ihre userDetailsViewModel ist eine Funktion, die undefined zurückgibt. Sie müssen entweder new verwenden oder eine return-Anweisung erstellen, wenn Sie ein tatsächliches Ansichtsmodell erstellen möchten. Z.B .:

   var UserDetailsViewModel = function(result) { 
       var self = this; 
       self.user = ko.observable(new UserModel(result)); 
   }; 
   
   var mainUserDetailsViewModel = new UserDetailsViewModel(data); 
   

2. Sie erhalten eine Referenz speichern, wenn Sie Ihre Viewmodel vom Anwendungsbereich der Ajax-Rückruf aktualisieren möchten. Alternativ können Sie die Ajax-Funktionalität Teil von das Viewmodel machen. Das einfachste Beispiel:

   var mainUserDetailsViewModel = new UserDetailsViewModel(data); 
   
   $.ajax({ 
       success: function(data) { 
       mainUserDetailsViewModel.user(new UserModel(data)); 
       } 
   }); 
   

   Stellen Sie sicher, dass dieses Modell verwenden in Ihrem applyBindings Aufruf:

   ko.applyBindings(mainUserDetailsViewModel); 
   

Bitte beachte, dass ich CapitalizedNames für Funktionen verwendet haben, die instanziiert werden müssen, und uncapitalizedNames für Instanzen dieser Funktionen. Wenn Sie die Standardkonventionen für die Namensgebung einhalten, können Sie den Überblick behalten.