无法点击磁带中的新闻

Question

请帮助修复脚本。 JSFIDDLE

我写了一个简单的脚本来显示来自 json 的新闻提要。单击特定新闻后，会打开一个包含新闻文本的模式 window。

但是模态 window 总是包含相同的文本。我需要在点击各种新闻项目后，模态 window 显示各种新闻文本

查看动态消息：

APP.NewsTapeView = Backbone.View.extend({  

  initialize: function() {   
    this.collection = new APP.NewsModelsCollection();  
    this._fillCollection();

    this.render();
  },    

  template: _.template($('#newsTapeTpl').html()),

  render: function () {  
    this.$el.html(this.template());    
    this._createNewsUnits();

    return this;
  },

  _createNewsUnits: function () {  
    this.collection.each(function (news) {    
      var newsUnitView = new APP.NewsUnitView({model: news});      
      $(this.$('#newsList')).append(newsUnitView.render().el);
    }, this);
  },

  _fillCollection: function () {  
    var self = this;

    $.each(APP.CONFIG.values, function(key, val) {    
      // console.log(val.title);
      // console.log(val.description);
      // console.log(val.poster);

      var newsModel = new APP.NewsModel({
        title: val.title,
        description: val.description,
        poster: val.poster
      });

      self.collection.add(newsModel);
    });

    // console.log(this.collection);
  }  

});

查看新闻单元：

APP.NewsUnitView = Backbone.View.extend({  

  initialize: function(model) {   
    self = this; 

    this.model = model.model;
  },

  className: 'news',

  template: _.template($('#newsUnitTpl').html()),

  render: function () {  
    this.$el.html(this.template({
      title: this.model.get('title'),
      description: this.model.get('description'),
      poster: this.model.get('poster')
    }));    
    return this;
  },

  events: {
    'click': function() {   
      self.openModal();
    }
  },

  openModal: function() {
    var newsModalView = new APP.NewsModalView(this.model);
    newsModalView.show(555, ['dfsdsdf']);
  }

});

查看新闻模式：

APP.NewsModalView = Backbone.View.extend({  

  initialize: function(model) {   
    var self = this;

    this.model = model;
    _block = null;
    _win = null;    
  },

  template: _.template($('#newsModalTpl').html()),

  render: function () {  
    $('#modalwindow').html(this.template({
      id: this.model.cid,
      title: this.model.get('title'),
      description: this.model.get('description'),
      poster: this.model.get('poster')
    }));  

    return this;
  },

  initBlock: function() {
    var self = this;

    var _block = document.getElementById('blockscreen'); 

    if (!_block) {
        var parent = document.getElementsByTagName('body')[0],
            obj = parent.firstChild; 

        _block = document.createElement('div'); 
        _block.id = 'blockscreen'; 
        parent.insertBefore(_block, obj);

        _block.onclick = function() { self.close() };         
    }

    _block.style.display = 'inline';     
  },

  initWin: function(width, html) {
    var self = this;

    _win = document.getElementById('modalwindow'); 

    if (!_win) {
        var parent = document.getElementsByTagName('body')[0];
        var obj = parent.firstChild;
        _win = document.createElement('div');
        _win.id = 'modalwindow';
        _win.style.padding = '0 0 5px 0';      
        parent.insertBefore(_win, obj);
    }

    _win.style.width = width + 'px'; 
    _win.style.display = 'inline'; 

    _win.innerHTML = html; 

    _win.style.left = '50%'; 
    _win.style.top = '10%'; 

    _win.style.marginTop = -(_win.offsetHeight / 2) + 'px'; 
    _win.style.marginLeft = -(width / 2) + 'px';

    this.render();

    document.getElementById('closeBtn').onclick = function() { self.close() }; 
  },

  close: function() { 
    document.getElementById('blockscreen').style.display = 'none';
    document.getElementById('modalwindow').style.display = 'none';        
  },

  show: function(html) {
    this.initBlock();
    this.initWin(html);
  }

});

Answer 1

问题出在

initialize: function(model) {   
    self = this; 

    this.model = model.model;
  }

因为你没有在这里声明 'self' 并且你没有添加 'Use strict' javascript 引擎通过全局声明它来使用它，并且它在每次分配时都会被覆盖。

尝试改变

events: {
    'click': function() {
      self.openModal();
    }
  }

到

events: {
    'click': function() {
      this.openModal();
    }
  }

我更新了fiddle。

还有一件事不要在每个视图中声明 var self = this，只要回调被 backbone 调用，函数的上下文就会正确设置到相应的视图。

无法点击磁带中的新闻

Unable to click on the news in the tape

javascript

backbone.js