从$ .ajax返回以后使用的数据

Question

我需要在knockoutjs的我的viewmodel上设置yeast_options。我正确地提供数据，但无法通过ajax调用访问它。 Ajax没有按我期望的方式使用。我想用函数返回他们创造什么，AJAX是需要使用一个“成功”的功能，这是不设置数据到我yeast_options属性：

 self.get_yeasts = function(){ 
      console.log('in get_yeasts...') 

      // var this_data = null; 

      var onSuccess = function(data){ 
       alert("It worked!"); 
       alert(data); 
       alert(self); 
       console.log(data); 
       // var this_data = data; 
       self.yeast_options = data; 
       return data; 
      } 

      var onError = function(error){ 
       alert("oops"); 
      } 

      var data = $.ajax({ 
       dataType: "json", 
       url: "http:/127.0.0.1:8000/api/items/yeasts", 
       success: onSuccess, 
       error: onError, 
      }); 

      // }); 
      console.log("about to return the data"); 
      console.log(data); 
      console.log(data.responseJSON); 
      // debugger; 
      return this_data; 
     } 

我试过几种不同的方式，好像回到从成功的功能数据，设置self.yeast_options成功中，并没有将获得的数据，将其

<script type='text/javascript'> 

    ko.observableArray.fn.countVisible = function(){ 
     return ko.computed(function(){ 
      var items = this(); 

      if (items === undefined || items.length === undefined){ 
       return 0; 
      } 

      var visibleCount = 0; 

      for (var index = 0; index < items.length; index++){ 
       if (items[index]._destroy != true){ 
        visibleCount++; 
       } 
      } 

      return visibleCount; 
     }, this)(); 
    }; 

    function Hop(data) { 
     this.name = ko.observable(data.name || ""); 
     this.amount = ko.observable(data.amount || ""); 
     this.time = ko.observable(data.time || ""); 
     this.use = ko.observable(data.use || "Boil"); 
    } 

    function Fermentable(data) { 
     this.name = ko.observable(data.name || ""); 
     this.pounds = ko.observable(data.pounds || ""); 
     this.ounces = ko.observable(data.ounces || ""); 
     this.weight_unit = ko.observable(data.weight_unit || "oz"); 
     this.milling_preference = ko.observable(data.milling_preference || "Milled"); 
    } 

    function Yeast(data){ 
     var self = this; 
     var permanent_yeast_options = data.yeast_options; 
     self.name = ko.observable(data.name || "-"); 
     self.current_filter = ko.observable("-Any-"); 
     self.yeast_groups_individual = ko.computed(function(){ 
      if (self.current_filter() !== "-Any-"){ 
       var options = _.filter(data.yeast_options, function(option){ 
        return option.category === self.current_filter(); 
       }); 
       return options; 
      } else{ 
        return permanent_yeast_options; 
       } 
      } 
     ); 
     self.yeast_categories = ko.observableArray(); 
     ko.computed(function(){ 
      var starter_list = ['-Any-']; 
      var categories = _.pluck(permanent_yeast_options, 'category'); 
      var final = starter_list.concat(categories); 
      self.yeast_categories(final); 
     }) 
    } 

    function TaskListViewModel() { 

     var self = this; 
     // debugger; 
     self.dd = function(variable, varName) { 
      var varNameOutput; 

      varName = varName || ''; 
      varNameOutput = varName ? varName + ':' : ''; 

      console.log(varNameOutput, variable, ' (' + (typeof variable) + ')'); 
     }; 

     self.get_yeasts = function(){ 
      console.log('in get_yeasts...') 

      // var this_data = null; 

      var onSuccess = function(data){ 
       alert("It worked!"); 
       alert(data); 
       alert(self); 
       console.log(data); 
       // var this_data = data; 
       self.yeast_options = data; 
       return data; 
      } 

      var onError = function(error){ 
       alert("sad panda"); 
      } 

      var data = $.ajax({ 
       dataType: "json", 
       url: "http:/127.0.0.1:8000/api/items/yeasts", 
       success: onSuccess, 
       error: onError, 
      }); 

      // }); 
      console.log("about to return the data"); 
      console.log(data); 
      console.log(data.responseJSON); 
      // debugger; 
      // return this_data; 
     } 

     // defaults 
     self.hops_uses = ko.observableArray(['Boil', 'Dry Hop']); 
     self.weight_units = ko.observableArray(['oz', 'lb']); 
     self.milling_preferences = ko.observableArray(['Milled', 'Unmilled']); 
     self.brew_methods = ko.observableArray(['Extract', 'Mini-Mash', 'All Grain', 'Brew-in-a-bag']); 

     self.recipe_name = ko.observable(""); 
     self.brew_method = ko.observable("Extract"); 
     self.batch_size = ko.observable("5"); 
     self.beer_style = ko.observable(""); 
     self.boil_time = ko.observable(60); 

     self.hops = ko.observableArray([new Hop({}), new Hop({})]); 
     self.fermentables = ko.observableArray([new Fermentable({name: 'test'}), new Fermentable({})]); 
     self.yeast_options = self.get_yeasts(); 
     console.log(self.yeast_options); 
     self.yeasts = ko.observableArray([new Yeast({yeast_options: self.yeast_options})]); 
     self.addFermentable = function(){ 
      self.fermentables.push(new Fermentable({})) 
     } 

     self.addYeast = function(){ 
      self.yeasts.push(new Yeast({yeast_options: self.yeast_options})); 
     } 

     self.addHop = function(){ 
      self.hops.push(new Hop({})); 
     } 

     self.removeFermentable = function(fermentable){ 
      self.fermentables.destroy(fermentable); 
     } 

     self.removeYeast = function(yeast){ 
      self.yeasts.destroy(yeast); 
     } 

     self.removeHop = function(hop){ 
      self.hops.destroy(hop); 
     } 

     // http://stackoverflow.com/questions/40501838/pass-string-parameters-into-click-binding-while-retaining-default-params-knockou 
     self.removeItem = function(item, name){ 
      name.remove(function(hop){ 
       return hop.name === item.name; 
      }); 
     } 

     self.name_filter = function(the_array){ 
      var items = _.filter(the_array, function(item){ 
       return item.name() !== "" && item.name() !== "-"; 
      }); 
      return items; 
     } 

     self.amount_filter = function(the_array, countable_fields){ 
      var items = _.filter(the_array, function(item){ 
       var count = 0; 
       for (i = 0; i < countable_fields.length; i++){ 
        var this_number = +item[countable_fields[i]](); 
        count = count + this_number; 
       } 
       return count > 0; 
      }); 
      return items; 
     } 

     self.dual_filter = function(the_array, countable_fields){ 
      items = self.name_filter(the_array); 
      items = self.amount_filter(items, countable_fields); 
      return items; 
     } 

     self.purify_yeasts = function(yeasts){ 
      var final_yeasts = []; 
      for (i = 0; i < yeasts.length; i++){ 
       var item = yeasts[i]; 
       var object = {name: item.name}; 
       final_yeasts.push(object); 
      } 
      return final_yeasts; 
     } 

     self.prepareJSON = function(){ 
      object = { 
       fermentables: self.dual_filter(self.fermentables(), ['pounds', 'ounces']), 
       hops: self.dual_filter(self.hops(), ['amount']), 
       yeasts: self.name_filter(self.purify_yeasts(self.yeasts())), 
       recipe_name: self.recipe_name(), 
       brew_method: self.brew_method(), 
       batch_size: self.batch_size(), 
       beer_style: self.beer_style(), 
       boil_time: self.boil_time(), 
      } 
      return object; 
     } 

     self.saveRecipeData = function(){ 
      var recipe_data = ko.toJSON(self.prepareJSON()); 
      alert("This is the data you're sending (universal Javascript object notation):\n\n" + recipe_data) 
      $.ajax({ 
       url: "http://localhost:8000/receive-recipe", 
       headers: { 
        "Content-Type": "application/json" 
       }, 
       method: "POST", 
       dataType: "json", 
       data: recipe_data, 
       success: function(data){ 
        console.log("Success! Saved the recipe"); 
       } 
      }); 
     } 

     self.my_to_json = function(object){ 
      return JSON.stringify(object, null, 4); 
     } 
    } 
    ko.applyBindings(new TaskListViewModel()); 
</script> 

，服务器对

@api_view(['GET']) 
def serve_yeasts(request): 
    """ 
    Serve up some yeasts 
    """ 
    data = [ 
     {'category': 'Danstar', 'yeasts': ['Danstar 1', 'Danstar 2']}, 
     {'category': 'Fermentis', 'yeasts': ['West Coast', 'American Saison', 'White Wine']}, 
     {'category': 'White Labs', 'yeasts': ['White 1', 'White Saison']}, 
    ] 

    return Response(data=data, status=status.HTTP_200_OK) 

Answer 1

var data = $.ajax({ 
       dataType: "json", 
       url: "http:/127.0.0.1:8000/api/items/yeasts", 
       success: onSuccess, 
       error: onError, 
       context: self 
      }); 
var onSuccess = function(data){ 
      alert("It worked!"); 
      alert(data); 
      alert(self); 
      console.log(data); 
      // var this_data = data; 
      this.yeast_options = data; 
      return data; 
     } 

将ajax调用的上下文属性设置为您的viewmodel。所以可以通过成功的方式访问。