Question

我是骨干新手，正在尝试点击事件的示例。我在视图中定义了事件。另外，添加了功能定义。但是click事件并没有调用我的函数。请在下面的代码中建议更改。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>


<div class="fileuploadView">

    <input type="file" id="file" name="file">
    <button id="submitFile" type="button" class="btn" name="submitFile"> Submit </button>

</div>


<script>

    var File = Backbone.Model.extend ({

        defaults: {
            name : "",
            location:""
        }
    });

    var FileView = Backbone.Model.extend ({

        initialize : function () {
            alert('FileView initialized');
        },

        events : {

            "click .submitFile": "onSubmitFile"
        },

        onSubmitFile : function(event)
        {
            alert('backbone click event');
            console.log('backbone click event -on console');
        }
    });

    var fileView = new FileView ({el : $('#fileuploadView')});

</script>

</body>
</html>

Answer 1

我猜选择器有问题。你的事件绑定说

   events : {

        "click .submitFile": "onSubmitFile"
    },

但是submitFile实际上是id。所以把它改成

   events : {
        "click #submitFile": "onSubmitFile"
    },

FileView也应该扩展Backbone.View而不是Backbone.Model

Answer 2

您使用骨干模式而非查看，使用＆＃39;。＆＃39;对于课程或＆＃39;＃＆＃39;为了id。

尝试这样做。

                   //View instead of model
var FileView = Backbone.View.extend ({

    initialize : function () {
        alert('FileView initialized');
    },

    events : {

        "click .submitFile": "onSubmitFile"
    },

    onSubmitFile : function(event)
    {
        alert('backbone click event');
        console.log('backbone click event -on console');
    }
});

var fileView = new FileView ({el : $('#fileuploadView')});

单击事件不会调用函数 - Backbone js

2 个答案: