Question

我试图在事件发生后强制重新加载敲除，以便刷新数据。我的视图代码如下所示。

var targeturl = "/ajax{{ event_id }}/";
var blockurl = "/ajax/block/{{ event_id }}/";
var page = "0";

$(function () {
    $.getJSON(targeturl + page, function (data) {
        var midPoint = Math.floor((data.length) / 2);
        var data1 = data.slice(0, midPoint);
        var data2 = data.slice(midPoint);

        // add block, feature and download ids
        data1.forEach(function (item) {
            item.block_id = "block-" + item._id;
            item.feature_id = "feature-" + item._id;
            item.download_id = "download-" + item._id;
        });

        data2.forEach(function (item) {
            item.block_id = "block-" + item._id;
            item.feature_id = "feature-" + item._id;
            item.download_id = "download-" + item._id;
        });

        var viewModel = {
            socialData1: ko.observableArray(data1),
            socialData2: ko.observableArray(data2),
            blockItem: function(item) {
                var tempid = item.block_id.split("-")[1];
                $.getJSON(blockurl + tempid, function (data) {
                    console.log(data);
                    socialData1.valueHasMutated();
                    socialData2.valueHasMutated();
                })
                .error(function () {
                    alert('error');
                });
            }
        };
        ko.applyBindings(viewModel);
    })
    .error(function () {
        alert('error');
    });
});

如何在blockItem内的viewModel函数中强制重新加载。

我想重新运行$.getJSON函数来获取更新的数据。

Answer 1

您必须在第一个viewModel之外定义getJSON变量。因此，您可以随时致电viewModel.blockItem(yourItem)。

我会创建这样的东西：

var targeturl = "/ajax{{ event_id }}/";
var blockurl = "/ajax/block/{{ event_id }}/";
var page = "0";

var ViewModel = function() {
  var self = this;
  self.socialData1 = ko.observableArray();
  self.socialData2 = ko.observableArray();
  self.blockItem = function(item) {
    var tempid = item.block_id.split("-")[1];
    $.getJSON(blockurl + tempid, function(data) {
        console.log(data);
        self.socialData1.valueHasMutated();
        self.socialData2.valueHasMutated();
      })
      .error(function() {
        alert('error');
      });
  }

  self.init = function() {
    $.getJSON(targeturl + page, function(data) {
        var midPoint = Math.floor((data.length) / 2);
        var data1 = data.slice(0, midPoint);
        var data2 = data.slice(midPoint);

        // add block, feature and download ids
        data1.forEach(function(item) {
          item.block_id = "block-" + item._id;
          item.feature_id = "feature-" + item._id;
          item.download_id = "download-" + item._id;
        });

        data2.forEach(function(item) {
          item.block_id = "block-" + item._id;
          item.feature_id = "feature-" + item._id;
          item.download_id = "download-" + item._id;
        });

        self.socialData1(data1);
        self.socialData2(data2),
        self.blockItem(item); //call blockItem if need here; not sure what you have to pass as item there
      })
      .error(function() {
        alert('error');
      });
  };

  self.init(); //run getjson first time
};

var myModel = new ViewModel();
ko.applyBindings(myModel);

如果您以后需要，可以根据需要致电myModel.blockItem(item)。

Answer 2

当您只想更改数据时，您正在重建viewModel。在数据获取函数之外声明你的viewModel。

var viewModel = {
  socialData1: ko.observableArray(),
  socialData2: ko.observableArray(),
  blockItem: function(item) {
    var tempid = item.block_id.split("-")[1];
    $.getJSON(blockurl + tempid, populateViewModel)
    .error(function() {
      alert('error');
    });
  }
};

您看到populateViewModel为getJSON做了getJSON。您的初始blockItem和function populateViewModel(data) { var midPoint = Math.floor((data.length) / 2); var data1 = data.slice(0, midPoint); var data2 = data.slice(midPoint); // add block, feature and download ids data1.forEach(function(item) { item.block_id = "block-" + item._id; item.feature_id = "feature-" + item._id; item.download_id = "download-" + item._id; }); data2.forEach(function(item) { item.block_id = "block-" + item._id; item.feature_id = "feature-" + item._id; item.download_id = "download-" + item._id; }); viewModel.socialData1(data1); viewModel.socialData2(data2); }看起来应该以相同的方式填充viewModel，因此两者都可以使用该函数（如果您愿意，可以在viewModel中将其设为一个方法）：

$(function() {
  ko.applyBindings(viewModel);
  $.getJSON(targeturl + page, populateViewModel)
    .error(function() {
      alert('error');
    });
});

要启动程序，只需应用绑定并填充viewModel。

<select name="cT_toggle" id="cT_toggle">
    <option value="clicktag1">2 meters</option>
    <option value="clicktag2">4 meters</option>
    <option value="clicktag3">6 meters</option>
    <option value="clicktag4">8 meters</option>
</select>

knockout触发视图模型中

2 个答案: