JavaScript-一个backbone collection 实例执行,add 触发的回调函数怎么执行？

发布于 2016-12-23 01:17:11 字数 3433 浏览 1248 评论 1

见第50行代码，我一直想不通这个add触发的回调，命名回调函数是有参数item的，但是这么触发，不带参数，不对啊。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Backbone.js test</title>
  <style type="text/css">
  button { border: 1px solid #eee; color: #333; width: 120px; height: 40px; border-radius: 6px; cursor: pointer; border: 1px solid orange; font-size: 14px; }
  button.active { background: #fff; color: orange; border: 1px solid orange; }
  </style>
</head>
<body>
<script src="../libs/jquery.js"></script>
<script src="../libs/underscore.js"></script>
<script src="../libs/backbone.js"></script>
<script type="text/javascript">
(function($){
   // 每个新增的item
   var Item = Backbone.Model.extend({
     defaults: {
       part1: 'hello',
       part2: 'world'
     }
   });
   
   var List = Backbone.Collection.extend({
     model: Item
   });
   // 每个item html渲染
   var ItemView = Backbone.View.extend({
     tagName: 'li', // name of (orphan) root tag in this.el
     initialize: function(){
       _.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here
       return this.render();
     },
     render: function(){
       $(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');
       return this; // for chainable calls, like .render().el
     }
   });
   // 最终的view操作
   var ListView = Backbone.View.extend({
     el: $('body'), // el attaches to existing element
     events: {
       'click button#add': 'addItem'
     },
     initialize: function(){
       _.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here
       
       this.collection = new List();
       //这个事件绑定的回调函数却没有参数啊？怎么执行？
       this.collection.bind('add', this.appendItem); // collection event binder
 
       this.counter = 0;
       return this.render();
     },
     render: function(){
       var self = this;
       $(this.el).append("<button id='add'>Add list item</button>");
       $(this.el).append("<ul></ul>");
       // 插入每个item
       _(this.collection.models).each(function(item){ // in case collection is not empty
         self.appendItem(item);
       }, this);
       return this;
     },
     addItem: function(){
       this.counter++;
       // 创建modle实例
       var item = new Item();
       // 更改属性
       item.set({
         part2: item.get('part2') + this.counter // modify item defaults
       });
       // 添加到collection 层,这个时候会触发add 
       // 也就是调用 this.collection.bind('add', this.appendItem);
       this.collection.add(item);
       // console.log(this.collection);
     },
     appendItem: function(item){
       var itemView = new ItemView({
         model: item
       });
       console.log('-----------------');
       $('ul', this.el).append(itemView.el);
       // console.log(itemView.render());
     }
   });
 
   var listView = new ListView();      
 })(jQuery);
</script>
  </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

晚风撩人 2017-10-26 19:47:05

我最近在研究backbone，确实是很实用的框架，非常方便，还有你的例子是旧版本的哦，新版本有一些变化。
好啦，我来回答这个问题。
你看addItem方法，里面是这样写的。
new 了一个 Item，更改了Item的属性，然后this.collection.add(item); 注意，这个时候参数 item 进去了，所以 appendItem() 自然就有参数了。
我是这样理解的。

回复收藏 0

~没有更多了~