如何從ViewModel中調用一個函數bindingHandler

我有一個方法在我的viewModel中調用ajax get方法來獲取所有項目。這一切都很完美。然後我有一個ko.bindingHandler，用於通過ajaxSubmit內聯上傳圖像。這也適用，但問題是我必須複製代碼來獲取bindingHandler中所有上傳圖像的項目，否則一旦上傳圖像就不會更新。刷新頁面可以解決問題，但我希望視圖能夠自動刷新新圖像。所以真正的問題是可以從bindingHandler中的viewModel調用一個函數嗎？任何幫助將不勝感激！如何從ViewModel中調用一個函數bindingHandler

BindingHandler：

ko.bindingHandlers.imageInLineUpload = { 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var options = ko.utils.unwrapObservable(valueAccessor()), 
      property = ko.utils.unwrapObservable(options.property); 

     $(element).change(function() { 
      if (element.files.length) { 
       if ((element.files[0].type === "image/png") || (element.files[0].type === "image/jpeg")) { 
        var $this = $(this); 
        $(element.form).ajaxSubmit({ 
         url: $.API.url + "XYZ", 
         type: "POST", 
         dataType: "text", 
         success: function (data) { 
          toastr.success('Upload Successful.'); 
          var viewModel= new MyViewModel(); 
          viewModel.GetObjects(); 
         }, 
         error: function (jqXHR, textStatus, errorThrown) { 
          toastr.error('Upload Failed. Please Try again!'); 
         } 
        }); 
       } 
       else { 
        toastr.error('Upload Failed. PNG and JPEG are the only supported formats.'); 
       } 
      } 
     }); 
    } 
};

視圖模型：我在過去已經使用

var MyViewModel = function() {  
    var self = this;  
    self.xyz = ko.observable("");  
    self.xyz = ko.observable(""); 
    self.xyz = ko.observable(""); 

    self.GetObjects= function() {  
    // Ajax call to fetch objects. 

    } 
    self.GetObjects(); 
}; 

ko.applyBindings(new MyViewModel());

來源

2014-10-28 mikemike396

有幾種方法可以做到這一點。從字面上「調用從bindinghandler一個ViewModel功能」的方法是做：

var viewModel = ko.dataFor(element); 
viewModel.GetObjects()

這是可行的，但它是一個非常平庸的解決方案;它非常緊密地將你的綁定處理程序耦合到這個特定的viewModel，它是一個隱式依賴; bindingHandler API並沒有說清楚這個函數是否需要。

另一種方法（在我看來，一個更好的方法）是函數傳遞到bindingHandler作爲一個選項參數：

<div data-bind="imageInLineUpload: {getImagesCallback: GetObjects}"></div>

在bindinghandler：

var options = ko.utils.unwrapObservable(valueAccessor()), 
    getImagesCallback = options.getImagesCallback; 

getImagesCallback();

（這與PW Kad的答案類似，但我認爲指定一個單獨的bindingKey爲不同的綁定處理程序提供選項對於所需的參數來說是一個糟糕的主意，並且是一種非常難看的方式來執行knockout綁定句柄RS，這一比例僅爲傳遞對象到當前綁定左撇子）

不過說真的，如果你的綁定處理程序做asyncronous電話，我認爲你需要重組的東西。在我看來，綁定處理程序應該只做視圖邏輯，而不是處理ViewModel中應該存在的AJAX。

來源

2014-10-28 20:17:56 Retsam

得到它的工作！必須添加「$ root」。在函數調用前面。這工作完美！謝謝！ – mikemike396 2014-10-29 13:13:04

的一種方法是向函數的引用傳遞到所述結合的處理程序作爲一個選項類似於我們如何在其他地方使用回調 -

<div data-bind="imageInLineUpload: someObservable, imageILUOptions: { callback: myFunction }"></div>

，並在您綁定的處理程序，您可以訪問這樣的功能 -

ko.bindingHandlers.imageInLineUpload = { 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var options = ko.utils.unwrapObservable(allBindingsAccessor).imageILUOptions; 
     var callback = options.callback; 

     // do something 
     callback(someVar);

這可以讓你的任何功能傳遞到結合，並將其作爲它裏面的回調。這不是一個完美的解決方案，但應該得到你所需要的。

來源

2014-10-28 16:34:40

此方法有效，但我同意@Retsam。謝謝回覆！ – mikemike396 2014-10-29 13:18:26

如何從ViewModel中調用一個函數bindingHandler

回答

相關問題