Вызов функции просмотра нокаута из jquery

Question

Я знаю, что есть несколько подобных вопросов, как это уже, но никто из них не помог решить мою проблему.

Я пытаюсь загрузить файл с помощью сообщения ajax и вернуть json, содержащий описание файла, которое затем передается в функцию viewmodel с нокаутом, которая находится внутри моего .js-файла.

я могу загрузить файлы с помощью Ajax пост:

 $('.upload-button').click(function() { 
     var formData = new FormData(); 
     var file = document.getElementById("fileupload").files[0]; 
     formData.append("FileUpload", file); 
     var action = "/QuestionWizard/Upload"; 

     $.ajax({ 
      type: "POST", 
      url: action, 
      data: formData, 
      contentType: false, 
      processData: false, 
      success: function (result) { 
       //call viewmodel function here and pass result 
      } 
     }); 
    }); 

это моя ViewModel функция:

 var ViewModel = function (d, m) { 
     var self = this; 
     var formData = null; 

     self.Model = ko.mapping.fromJS(d, m); 



     self.AddDoc = function (data) { 
      self.Model.CurrentStep().Files.push({ Name: data.Name, Extension: data.Extension, ContentType: data.ContentType, Size: data.Size, Content: data.Content, FilePath: data.FilePath, Folder: data.Folder }); 
     } 

    } 

Загрузить Действие:

[HttpPost] 
    public JsonResult Upload() { 
     FileUploadModel upload = new FileUploadModel(); 

     try { 

      if (Request.Files != null) { 
       HttpPostedFileBase file = Request.Files[0]; 
       upload.Size = settings.ConvertBytesToMegabytes(file.ContentLength); 

       using (var binaryReader = new BinaryReader(Request.Files[0].InputStream)) { 
        upload.Content = binaryReader.ReadBytes(Request.Files[0].ContentLength); 
       } 

       upload.Name = Path.GetFileName(Request.Files[0].FileName); 
       upload.ContentType = Request.Files[0].ContentType; 
       upload.Extension = Path.GetExtension(Request.Files[0].FileName); 
       upload.Folder = User.Question + "-" + User.Token; 
       Transmit.write(ref upload); 
      } 
     } catch (Exception) { 
      return Json(null); 
     } 
     return Json(upload); 
    } 

Загрузить Кнопка в виде:

<input type="file" name="fileupload" id="fileupload" data-bind="event:{ change: Upload.bind($data, $element.files[0]) }" /> 

Может кто-нибудь, пожалуйста, помогите мне выяснить, как вызвать функцию viewmodel и передать полученный json или лучший способ сделать это.

Спасибо.

Answer 1

Вам просто нужно переместить AJAX в область, в которой присутствует модель просмотра. Например, я обычно структурировать Нокаут код как:

var Namespace = Namespace || {}; 

Namespace.AppName = (function() { 
    var _init = function (data) { 
     var viewModel = Namespace.AppName.ViewModel(data); 
     ko.applyBindings(viewModel); 
     _wireEvents(viewModel); 
    }; 

    var _wireEvents = function (viewModel) { 
     // using the example of your AJAX method 
     $('.upload-button').click(viewModel.DoUpload); 
    }; 

    return { 
     Init: _init 
    }; 
})(); 

Затем, чтобы телеграфировать все, вы просто должны сделать что-то вроде следующего, на ваш взгляд:

$(document).ready(function() { 
    var data = {}; // any initial data you feed into the view model 
    Namespace.AppName.Init(data); 
}); 

Поскольку обработчик .upload-button клик на самом деле вызывает метод на вашей модели представления, у вас есть прямой доступ к нему. Например, внутри вашего определения модели модели:

self.DoUpload = function() { 
    ... 

    $.ajax({ 
     type: "POST", 
     url: action, 
     data: formData, 
     contentType: false, 
     processData: false, 
     success: function (result) { 
      // use `self` to access any view model observable 
     } 
    }); 
};