Geekly Articles each Day
📜 ⬆️ ⬇️

Practical use of Backbone.View


In my previous topic , I described the basic principles of working with the backbone.js framework, now I suggest switching to practice and doing something useful.

Task


Suppose that our site often uses different types of pop-ups. All of them have similar features; they can be opened in large numbers, dragged and closed. In addition, active and inactive popups are different, and the active one is located on top of the rest and is not obscured (hmm ... I would say that this is more like a window-manager).
In general, something like this:


In accordance with the precepts of the PLO, we will try to develop a class for pop-pop, from which we can inherit and create pop-pop to your taste with a common behavior for all.
')
Download backbone.js , jquery , jquery ui , underscore.js and

index.html


To begin with, let's create an index file with connected libraries, files of our (not yet written) application, and templates.

<!doctype html> <html> <head> <title>Popup demo</title> <link rel="stylesheet" href="css/main.css" /> <!-- libs --> <script type="text/javascript" src="js/lib/jquery.js"></script> <script type="text/javascript" src="js/lib/jquery-ui.js"></script> <script type="text/javascript" src="js/lib/underscore.js"></script> <script type="text/javascript" src="js/lib/backbone.js"></script> <!-- app --> <script type="text/javascript" src="js/app/app.js"></script> <script type="text/javascript" src="js/app/views/PopupView.js"></script> <script type="text/javascript" src="js/app/views/ChildPopupView.js"></script> <!-- templates --> <script id="popup-template" type="text/template"> <div class="title"> <h1><%= title %></h1> </div> <div class="content"> <%= content %> </div> <div class="popup-close"> </div> </script> <script id="child-popup-template" type="text/template"> <div class="title"> <h1><%= title %></h1> <h3>i am a child</h3> </div> <div class="content"> <%= content %> </div> <div class="popup-close"> </div> </script> </head> <body> <button id="popup-button">popup</button> <button id="child-popup-button">child popup</button> </body> </html>


In the "body" we have only 2 buttons with which we will create pop-ups.

app.js


In this file, the button that hangs up popups and adds them to our DOM is hung on button clicks.
 function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } $(function () { $('#popup-button').click(function () { var popup = new PopupView(); $('body').append(popup.render().el); }); $('#child-popup-button').click(function () { var popup = new ChildPopupView(); $('body').append(popup.render().el); }); });

I also stuffed a function here to get a random integer number, it will come in handy for us later.

And now the most interesting!

PopupView.js


 var PopupView = Backbone.View.extend({ className: 'popup', events: { 'click .popup-close': 'close', 'mousedown': 'raise' }, initialize: function () { this.template = $('#popup-template').html(); this.width = '400px'; this.height = '350px'; this.top = getRandomInt(100, 400) + 'px'; this.left = getRandomInt(200, 500) + 'px'; this.context = { title: 'Default Title', content: 'Lorem ipsum dolor sit amet.' } $(this.el).css({ 'width': this.width, 'height': this.height, 'top': this.top, 'left': this.left, 'position': 'absolute' }); $(this.el).draggable(); }, /** *       . */ render: function () { $(this.el).html(_.template(this.template, this.context)); //     $('.popup-active').removeClass('popup-active'); $(this.el).addClass('popup-active'); //  z-index,       var max_z = 100; $('.popup').each(function () { var curr_z = parseInt($(this).css('z-index')); if (curr_z > max_z) { max_z = curr_z; } }); $(this.el).css({ 'z-index': max_z + 10 }); return this; }, /** *        *    . */ raise: function (e) { if (!$(this.el).hasClass('popup-active')) { var max_z = 0; $('.popup-active').removeClass('popup-active'); $('.popup').each(function () { var curr_z = parseInt($(this).css('z-index')); if (curr_z > max_z) { max_z = curr_z; } }); $(this.el).css({ 'z-index': max_z + 10 }); $(this.el).addClass('popup-active') } }, /** *    DOM. */ close: function () { $(this.el).remove(); var max_z = 0; var top = null; //       $('.popup').each(function () { var curr_z = parseInt($(this).css('z-index')); if (curr_z > max_z) { max_z = curr_z; top = this; } }); //    if (top) { $(top).addClass('popup-active'); } } });


Here we have described the popup, which will become the parent for all other popaps, it implements all the typical functionality.

Now, in order to create a new popup that implements some kind of new behavior, or using another template, we need only a few lines of code.

ChildPopupView.js


 var ChildPopupView = PopupView.extend({ initialize: function () { ChildPopupView.__super__.initialize.call(this); this.template = $('#child-popup-template').html(); this.context = { title: 'Child Title', content: 'Lorem ipsum dolor sit amet.' } } });


In this descendant, we connected another template and changed the title of the popup. This is how everything is simple!

Demo code

Source: https://habr.com/ru/post/133622/

More articles:


All Articles