Question

我尝试使用骨干事件来设置</input type="file" />按钮，但如果我在模型中设置它，它就不起作用。我知道它是因为对象的绑定事件，但我不知道如何解决这个问题。我需要做的就是使用按钮ID选择的新路径更改localStorage值，但我无法使其工作。

有什么想法吗？

这是我的代码：

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>

Answer 1

如果我理解得很清楚，你会错过将e参数传递给模型方法。

在TodoView中，方法toggleStatus应该是这样的：

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

Backbone.js：使用输入文件更改模型

1 个答案: