ajax搜索结果返回后初始化viewmodel并刷新

Posted 2023-03-27

【中文标题】ajax搜索结果返回后初始化viewmodel并刷新

【英文标题】：Initialize viewmodel and refresh after ajax seach results are back

【发布时间】：2018-04-02 00:18:14

【问题描述】：

如何在第一次加载页面时初始化 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);


                ;

【参考方案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 -->

【讨论】：

谢谢。虽然我如何让它在页面加载时不显示任何结果并且仅在点击刷新啤酒时显示？我的页面在页面加载时不会有任何结果，但是在单击“搜索”时会加载结果，但是如果我在 ajax 调用返回中绑定，则视图在此之前不知道视图模型

好吧，你做我所做的并使用 GetBeer().then() 在执行 .then() 方法的内容之前等待来自 ajax 方法的结果。这样你就知道你有数据，并在那之后实例化 viewModel。您可能需要像 这样的 html 条件，以确保在实际上没有任何数据返回的情况下不会爆炸。

感谢您的帮助。这有帮助。