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

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

javascript backbone.js

Javascript Backbone.js：使用输入文件更改模型,javascript,backbone.js,Javascript,Backbone.js,我曾尝试使用主干事件设置按钮，但如果在模型内部设置，则该按钮不起作用。我知道这是因为对象的绑定事件，但我不知道如何解决这个问题。我所需要做的就是使用按钮id选择的新路径更改localStorage值，但我就是无法让它工作有什么想法吗这是我的密码： app.js var TodoItem = Backbone.Model.extend({ defaults: { somepath: window.location.pathname, status: "

我曾尝试使用主干事件设置

按钮，但如果在模型内部设置，则该按钮不起作用。我知道这是因为对象的绑定事件，但我不知道如何解决这个问题。我所需要做的就是使用按钮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 -->

var TodoItem=Backbone.Model.extend({
默认值：{
somepath:window.location.pathname，
状态：“不完整”，
身份证号码：1
},
urlRoot:“/todos”，
切换状态：功能（e）{
控制台日志（e）；
if（this.get（'status'）='completed'）{
此.set（{'status'：'complete'}）；
this.set（{'somepath'：window.location.pathname+'xxxxx'}）；
}否则{
此.set（{'status'：'complete'}）；
this.set（{'somepath'：window.location.pathname}）
}
这是save（）；
},
localStorage：新主干。localStorage（“按钮”）
});
var TodoView=Backbone.View.extend({
标记名：“article”，
id:“待办事项视图”，
类名：“todo”，
模板：35;.template（$（'#personTemplate'）.html（）），
活动：{
“更改输入”：“切换状态”
},
切换状态：函数（）{
this.model.toggleStatus（）；
},
删除：函数（）{
这个。$el.remove（）；
},
初始化：函数（）{
//这个。render（）；
this.model.on（'change'，this.render，this）；
this.model.on（'destroy'，this.remove，this）；
},
渲染：函数（）{
var attributes=this.model.toJSON（）；
this.el.html（this.template（attributes））；
}
});
var todoItem=新todoItem；
var todoView=新todoView（{model:todoItem}）；
todoView.render（）；
$（document.body）.append（todoView.el）；
//document.getElementById（'wat'）。addEventListener（'change'，函数（e）{
//console.log（如target.value）；
// });

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>


项目1

如果我理解得很好，您将无法通过

参数传递给model方法

在TodoView中，方法

toggleStatus

应如下所示：

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