无法点击磁带中的新闻

Question

请帮助修复脚本。 JSFIDDLE

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

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

查看新闻提要：

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”，也没有添加“使用严格”，javascript 引擎正在通过全局声明它来使用它，并且它在每次分配时都会被覆盖。

尝试改变

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

到

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

我已经更新了fiddle。

还有一点，不要在每个视图中声明 var self = this，每当主干调用回调时，函数的上下文都会正确设置到相应的视图。