0

我正在制作一个 Backbone.js 应用程序，在此我遇到了有关事件的问题.. 并过滤

问题1：

当我单击列表项事件未触发时...未调用方法

问题 2：在学生视图中单击“highScoreBtn”时未调用“getScore”方法。

要求 ：

在我从“得分”过滤高值之后 - 我如何突出显示“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

1

对于问题 1：
看起来 StudentView 正在尝试观察自己。View 应该观察其子元素的 DOM 事件。

var var studentView = Backbone.View.extend({
    tagName:'li',
    // className:"list", # move to template
    events:{
        'click .list':"called"
    },
    ....(omitting)

<script id="studentTemplate" type="text/template">
    <span class="list"><strong>Name :</strong> <%= name %> <span>Scored:</span> <%= scored %></span>
</script>

对于问题2：
是否正确调用了showHighScore？
如果添加调试代码，开发者工具的控制台会显示什么？

    getHighSocre:function(){
        console.log('getHighScore is called');
        return _.each(this.collection, function(item){
            return item.get('scored') > 60;
        })
    },
    showHighScore:function(){
        console.log('showHighScore is called');
        var highscore = this.getHighSocre();
        console.log(highscore);
    }

如果调用了函数，您应该添加一些代码来在 getHighScore 函数中进行突出显示。

- 编辑 -

可以通过在 StudentView 中观察 Backbone Model 事件来实现。

这不是一个干净的方式太多，因为模型的高亮属性应该在模型的初始化时设置。

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

var studentView = Backbone.View.extend({
  ...
  initialize: function(){
     this.model.on("change", this.highlight, this);
  },
  ...
  highlight: function(){
     if (this.model.get('hilight')){
         $('.list', this.el).addClass("hilight");
     }
  }
})

var studentsView = Backbone.View.extend({
    ...
    getHighSocre:function(){
        _.each(this.collection, function(item){
            if (item.get('scored') > 60){
               item.set(hilight:true);
            } 
        })
    },
    ...
})
于 2013-04-27T08:30:03.780 回答
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 回答