Backbone.js: Using input file to change the model

I have tried to use the backbone events to set up the </input type="file" /> button but it doesn't work if I set it up inside the model. I know it's because of the binding event to an object, but I have no idea how to solve this. All I need to do is to change the localStorage value using the new path selected with the button id but I just can't get this to work.

Any ideas?

Here is my code:

app.js

var TodoItem = Backbone.Model.extend({
    defaults: {
        somepath: window.location.pathname, 
        status: "incomplete", 
        id: 1
    },
    urlRoot: "/todos",
    toggleStatus: function(e){

        <!-- THIS IS NOT SHOWING ANYTHING -->
        console.log(e);
        <!-- END COMMENT -->

        if(this.get('status') === 'incomplete'){
          this.set({'status': 'complete'});
          this.set({'somepath': window.location.pathname + 'xxxxx' });
        } else {
          this.set({'status': 'incomplete'});
          this.set({'somepath': window.location.pathname })
        }
        this.save();
    },
    localStorage: new Backbone.LocalStorage("button")
});

var TodoView = Backbone.View.extend({
    tagName: 'article',
    id: 'todo-view',
    className: 'todo',

    template: _.template( $('#personTemplate').html() ),

    events: {
        "change input": "toggleStatus"
    },

    toggleStatus: function () {
        this.model.toggleStatus();
    },

    remove: function(){
        this.$el.remove();
    },

    initialize: function(){
        // this.render();
        this.model.on('change', this.render, this);
        this.model.on('destroy', this.remove, this);
    },

    render: function () {
        var attributes = this.model.toJSON();
        this.$el.html(this.template(attributes));
    }
});

var todoItem = new TodoItem;
var todoView = new TodoView({ model: todoItem });


todoView.render();
$(document.body).append(todoView.el);

<!-- ONLY THIS CODE WORKS. ALSO IF I JUST ADD THE FUNCION OF THE EVENT INSIDE THE VIEW -->
// document.getElementById('wat').addEventListener('change', function (e) {
//  console.log(e.target.value);
// });
<!-- END COMMENT -->

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Project 1</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, height=device-height, target-densitydpi=device-dpi">

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>

     <ul id="elem">
     </ul>

    <script id="personTemplate" type="text/template">
        <h3 class="<%= status %>"><input type="file" id="wat"<% if (status === "complete") print("checked") %> />
         <%= description %></h3>
    </script>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/underscore.js"></script>
    <script type="text/javascript" src="js/backbone.js"></script>
    <script type="text/javascript" src="js/backbone-localstorage.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

</body>
</html>

Solution

If I understand well, you're missing to pass through the e argument to the model method.

Inside the TodoView, the method toggleStatus should be like this:

toggleStatus: function (e) {
    this.model.toggleStatus(e);
},