ノックアウトトリガーovservableビューモデルの関数からのリフレッシュ

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

どのように私はviewModel内blockItem機能でノックアウトのリロードを強制します。

$.getJSON関数を実行して、更新されたデータを取得します。

Answer 1

viewModel変数を最初のgetJSONの外に定義する必要があります。したがって、いつでもviewModel.blockItem(yourItem)に電話することができます。

私はこのような何か、それを作成します：あなたはあなたが必要な場合は、後でmyModel.blockItem(item)を呼び出すことができる必要がある場合は

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

。

Answer 2

データを変更するだけで、viewModelを再構築しています。あなたのviewModelをデータ取得関数の外に宣言してください。あなたは、私がgetJSONためpopulateViewModelアクションを作っ参照

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

。それは次のようになり、両方のあなたの最初の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に値を設定します。

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