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调用然后使用结果初始化模型。

＆＃13;

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);
  });

＆＃13;

<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 -->

＆＃13;

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

1 个答案: