0

私は Backbone.js アプリを作成しています。これで、イベントに関する問題が発生しました..フィルター

問題 1:

リスト項目のイベントをクリックしても起動しない... メソッドが呼び出されない

問題2：「highScoreBtn」をクリックすると、学生ビューの「getScore」メソッドが呼び出されません..

リクエスト ：

「scored」から高い値をフィルタリングした後、その「li」を強調表示するにはどうすればよいですか - クラス名 (「.highlight」) を追加します。

私のコードの何が問題なのですか..または誰かが私に正しい方法をアドバイスできます..

私のサンプルJS：

$(function() {
    var student = [
        {name:"student0",scored:75},{name:"student1",scored:49},{name:"student2",scored:25},
        {name:"student3",scored:96},    {name:"student4",scored:42},    {name:"student5",scored:85},    
        {name:"student6",scored:68},    {name:"student7",scored:19},    {name:"student8",scored:85},
        {name:"student9",scored:26}
    ]


var model = Backbone.Model.extend({
    defaults:{
        name:"undefined",
        scored:"0"
    }
});

var collection = Backbone.Collection.extend({
    model:model
});

var studentView = Backbone.View.extend({
    tagName:'li',
    className:"list",
    events:{
        'click .list':"called"
    },
    template:_.template($("#studentTemplate").html()),
    render:function(){
        this.$el.append(this.template(this.model.toJSON()));
        return this;
    },
    called:function(){
        alert("i a called")
    }
});

var studentsView = Backbone.View.extend({
    el:$(".page"),
    events:{
        "click #highScoreBtn":"showHighScore"
    },
    initialize:function(){
        this.collection = new collection(student);
        this.render();
    },
    render:function(){
        var that = this;
        _.each(this.collection.models, function(item){
            that.$el.find('ul').append(new studentView({model:item}).render().el);
        })
    },
    getHighSocre:function(){
        return _.each(this.collection, function(item){
            return item.get('scored') > 60;
        })
    },
    showHighScore:function(){
        this.getHighSocre();
    }
})

var newStudentList = new studentsView();
});

HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,Chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <title>User Manager</title>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <style type="text/css">
        li{
            border-bottom:1px solid gray;
            list-style: none;
            padding: 10px;
        }
        ul{
            padding:0;
            margin:0;
        }

        li:last-child{
            border: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Student Manager</h1>
        <hr>
        <div class="page">
            <a id="highScoreBtn" class="btn btn-primary" href="#">Show high Score</a>
            <hr>
            <ul>

            </ul>
        </div>
    </div>
    <script id="studentTemplate" type="text/template">
        <strong>Name :</strong> <%= name %> <span>Scored:</span> <%= scored %>
    </script>
    <script type="text/javascript" src="js/lib/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/lib/underscore-min.js"></script>
    <script type="text/javascript" src="js/lib/backbone-min.js"></script>
    <script type="text/javascript" src="js/student.js"></script>
</body>
</html>
4

2 に答える 2

0

よくわかりませんが、次のコードがお役に立てば幸いです。

render:function(){
    var that = this;
    that.$el.find('ul').empty();
    _.each(this.collection.models, function(item){
        that.$el.find('ul').append(new studentView({model:item}).render().el);
    })
},

showHighScore:function(){
    this.getHighSocre();
    this.render();
}
于 2013-04-27T08:47:59.423 に答える