无法点击磁带上的新闻

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

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

视图新闻提要：

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); 
    } 

});

来源

2016-08-19 sergey.sergeyd2016

问题是与

initialize: function(model) { 
    self = this; 

    this.model = model.model; 
    }

因为你还没有宣布“自我”在这里和你have't增加了“使用严格”的JavaScript引擎是由全球范围内宣布它使用它，它就会被覆盖上每一项任务。

尝试改变

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

到

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

我已经更新了fiddle。

还有一两件事没有在每个视图声明var self = this，只要回调由骨干称为上下文的功能正确设置到相应的视图。

来源

2016-08-19 12:52:35

无法点击磁带上的新闻

回答

相关问题