单击击倒.js下载文件

Question

html

<tbody data-bind="foreach: arrayList">
    <tr>
        <td><a href="#" data-bind="click: $parent.downloadLastFile">Download</a></td>
    </tr>
</tbody>

javascript

    function ItemViewModel(item){
    if(!$.isEmptyObject(item)){
      var self = this;
      self.lastFile = ko.observable(item.file_name);    

      self.downloadLastFile = function(row) {
         console.log(row.lastFile());
         var link = document.createElement('a');
         link.href = data;
         link.download = row.lastFile();
         document.body.appendChild(link);
         link.click();
        }
     }
   }
function MainViewModel() {
    var self = this;
    self.arrayList= ko.observableArray();
}
dataModel = new MainViewModel();
ko.applyBindings(dataModel);

I am trying to download a file on clicking. This piece of code is not working. Can someone check?

Answer 1

• I can't see self variable defined in your model.
• Since I see $parent in your click binding I assume there should be a parent model where you defined and assign data to ArrayList .
• Since you are using knockout click binding you don't need to use jquery click binding inside knockout click function ("#download_div") again. WRONG

Below just is an example how you can do it

Example : https://jsfiddle.net/kyr6w2x3/114/

JS:

var data = [{id:1, file_name : "file_name1"},{id:2, file_name : "file_name2"}];

function AppViewModel(){
   var self = this;
   self.ArrayList = ko.observableArray($.map(data, function (item) {
          return new ItemViewModel(item);
    }));

   self.downloadLastFile = function(item) {
     console.log(item.lastFile());
     var link = document.createElement('a');
    link.href = data;
    //here you append your rootURL to the file name
    link.download = item.lastFile();
    document.body.appendChild(link);
    link.click();
   }
 }

 var ItemViewModel = function(data){
   var self = this;
   self.lastFile = ko.observable(data.file_name);
 }

var viewModel = new AppViewModel();
ko.applyBindings(viewModel);