Help please fix the script.

I wrote a simple script that outputs a news feed from json. After clicking on a specific news modal window opens and in it the text of the news.

jsfiddle

The problem is that after clicking on any news a modal window opens in which the text is always the same news.

Here are views of the feed:

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

news:

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

modal window:

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

    1 answer 1

    Oh no no no:

     APP.NewsUnitView = Backbone.View.extend({ initialize: function(model) { self = this; // <--- Ага, вот она ошибка! this.model = model.model; },

    Well, in NewsUnitView you save the link to your NewsUnitView object into a global variable and rewrite it at each initialization. And in the handler, you access the method of the object contained in the global variable, and therefore it does not work.

    Actually you need to erase this line to hell and in the same NewsUnitView replace self with this in the call to the handler.

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

    Also, although it is not a question of code review, I note that in general, the code is sad. You can start upgrading by taking all the work with styles from js into special css classes, and working accordingly with hanging-hanging these classes, rather than manually changing element.style

    • You are just unreal cool. Thanks - cyklop77