在ajax搜索結果返回後初始化viewmodel並刷新

Question

如何在第一次加載頁面時初始化viewModel？

Ajax調用的刷新工作並在ajax調用後正確加載數據，但是在第一次加載時頁面不知道模型。

var viewModel = {}; 
     $("#searchButton").click(function() { 
        var tc= $("#tc").val(); 
        var y= $("#y").val(); 
        $.ajax({ 
         url: "Search/?t=" + tc+ "&y=" + y, 
         type:'GET', 
         dataType: 'json', 
             success: function (result) { 
          viewModel = new TourViewModel(result); 
          ko.applyBindings(viewModel); 
         } 
        }); 
       }); 

       function TourViewModel(data) { 
        var self = this; 
        var tourMapping = {}; 

        self.selectedItem = ko.observable(""); 
        self.lastSavedJson = ko.observable(""); 
        self.saveMe = function() { 
                  viewModel.selectedItem(this); 
         self.lastSavedJson(JSON.stringify(ko.toJS(self.selectedItem), null, 2)); 
         $.ajax({ 
          url: "SaveTour", 
          data: ko.toJSON({ tour:ko.toJS(self.selectedItem) }), 
          type: "post", 
          contentType: "application/json", 
          success: function (result) 
           { alert(result) } 
         }); 

        } 

        selectItem = function() { 
         self.selectedItem(this); 
        } 

        ko.mapping.fromJS(data, tourMapping, self); 


       }; 

Answer 1

這是一個相當基本的例子。做你的ajax調用，然後使用結果初始化模型。

var ViewModel = function(r) { 
 
    var self = this; 
 
    this.Beers = ko.observableArray(r.map(function(beer) { 
 
    return new BeersModel(beer); 
 
    })); 
 
    this.RefreshBeer = function() { 
 
    self.Beers([]); 
 
    GetBeer() 
 
     .then(function(response) { 
 
     self.Beers(response.map(function(beer) { 
 
      return new BeersModel(beer); 
 
     })) 
 
     }); 
 
    } 
 
} 
 

 
var BeersModel = function(r) { 
 
    this.name = r.name; 
 
} 
 

 
var GetBeer = function() { 
 
    return $.ajax({ 
 
    url: 'https://api.punkapi.com/v2/beers', 
 
    method: 'GET' 
 
    }) 
 
} 
 

 
// Do init ajax stuff, and load viewModel 
 
GetBeer() 
 
    .then(function(response) { 
 
    var model = new ViewModel(response); 
 
    ko.applyBindings(model); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<button data-bind="click: RefreshBeer">Refresh Beer</button> 
 
<!-- ko if: Beers() --> 
 
<ul> 
 
    <!-- ko foreach: Beers --> 
 
    <li> 
 
    <span data-bind="text: name"></span> 
 
    </li> 
 
    <!-- /ko --> 
 
</ul> 
 
<!-- /ko -->