BackboneTutorials.com - What is a view?

An example to implement backbone.js view functionality

by Cardiff

HTML

<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.5/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script src="http://dimsemenov.com/plugins/magnific-popup/dist/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="http://dimsemenov.com/plugins/magnific-popup/site-assets/all.min.css">
<a href="#test-popup" class="open-popup-link">Show inline popup</a>

<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-hide">Popup content</div>

CSS

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width:auto;
  max-width: 500px;
  margin: 20px auto;
}

JavaScript

SearchView = Backbone.View.extend({
    el: $(".open-popup-link"),
    initialize: function () {
        $(this.el).magnificPopup({
            type: 'inline',
            midClick: true
        });
    }
});
var search_view = new SearchView();