Skip to content

Instantly share code, notes, and snippets.

@andreisebastianc

andreisebastianc/index.html

Last active September 15, 2015 09:35
Show Gist options
  • Save andreisebastianc/880dfac3318cc891b62c to your computer and use it in GitHub Desktop.
Save andreisebastianc/880dfac3318cc891b62c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. andreisebastianc revised this gist Sep 15, 2015. 1 changed file with 15 additions and 12 deletions.
    27 changes: 15 additions & 12 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -32,6 +32,8 @@ <h1>Welcome to your profile</h1>
    </div>
    </script>

    <button type="text/button" id="add-mock-user">Add new</button>

    <script type="text/javascript">
    var mockUsers = [
    {
    @@ -56,19 +58,17 @@ <h1>Welcome to your profile</h1>
    imgURL: "http://lorempixel.com/120/120/people"
    },
    remove: function () {
    this.trigger('removeMe');
    this.trigger('destroy', this);
    }
    });

    var UserCollection = Backbone.Collection.extend({
    model: UserModel,
    initialize: function (models, options) {
    var that = this;
    this.set(models);
    this.models.forEach( function (model) {
    that.listenTo(model, 'removeMe', function() {
    debugger;
    });
    addMockUser: function () {
    this.add({
    name: "RANDOM",
    age: Math.random() * 100,
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    });
    }
    });
    @@ -87,9 +87,7 @@ <h1>Welcome to your profile</h1>
    });

    var HomepageView = BaseView.extend({
    initialize: function (options) {
    this.el = options.el;

    initialize: function () {
    this.userProfile = new UserProfileView({
    model: preEmployment.at(0)
    });
    @@ -108,6 +106,9 @@ <h1>Welcome to your profile</h1>
    });

    var FriendsListView = BaseView.extend({
    initialize: function () {
    this.listenTo(this.collection, 'all', this.render);
    },
    template: function () {
    return this.renderTemplate('#template-FriendsListView');
    },
    @@ -129,7 +130,6 @@ <h1>Welcome to your profile</h1>
    "click .remove-btn": "handleRemoveClick"
    },
    handleRemoveClick: function () {
    this.remove();
    this.model.remove();
    },
    template: function (values) {
    @@ -156,6 +156,9 @@ <h1>Welcome to your profile</h1>
    });
    homepageView.render();

    $('#add-mock-user').on('click', function () {
    preEmployment.addMockUser();
    });
    </script>
    </body>
    </html>
  2. andreisebastianc created this gist Sep 15, 2015.
    161 changes: 161 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,161 @@
    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
    <script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>
    <title>BB::APP</title>
    </head>
    <body>
    <h1>Welcome to your profile</h1>
    <div id="page"></div>

    <script type="text/template" id="template-FriendsListView">
    <ul class="friends list view">
    </ul>
    </script>

    <script type="text/template" id="template-FriendInListView">
    <li class="friend in-list view">
    <img src="<%= imgURL %>"/>
    <button type="button" class="remove-btn">REMOVE</button>
    </li>
    </script>

    <script type="text/template" id="template-UserProfileView">
    <div class="user profile view">
    <img src="<%= imgURL %>"/>
    <div>
    <span class="highlight name"><%= name %></span>
    <p class="description"><%= description %></p>
    </div>
    </div>
    </script>

    <script type="text/javascript">
    var mockUsers = [
    {
    name: "Sergiu Suciu",
    age: 21,
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    },
    {
    name: "Andrei Cimpean",
    age: 27,
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    },
    {
    name: "Andrei Hosu",
    age: 23,
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    }
    ];

    var UserModel = Backbone.Model.extend({
    defaults: {
    imgURL: "http://lorempixel.com/120/120/people"
    },
    remove: function () {
    this.trigger('removeMe');
    }
    });

    var UserCollection = Backbone.Collection.extend({
    model: UserModel,
    initialize: function (models, options) {
    var that = this;
    this.set(models);
    this.models.forEach( function (model) {
    that.listenTo(model, 'removeMe', function() {
    debugger;
    });
    });
    }
    });

    var BaseView = Backbone.View.extend({
    renderTemplate: function (selectorString, options) {
    var templateText = document.querySelector(selectorString).innerText;
    var compiled = _.template(templateText);

    if (options != null) {
    return compiled(options);
    }

    return compiled();
    }
    });

    var HomepageView = BaseView.extend({
    initialize: function (options) {
    this.el = options.el;

    this.userProfile = new UserProfileView({
    model: preEmployment.at(0)
    });

    this.friendsList = new FriendsListView({
    collection: preEmployment
    });
    },
    render: function () {
    this.userProfile.render();
    this.$el.append(this.userProfile.el);

    this.friendsList.render();
    this.$el.append(this.friendsList.el);
    }
    });

    var FriendsListView = BaseView.extend({
    template: function () {
    return this.renderTemplate('#template-FriendsListView');
    },
    render: function () {
    var that = this;

    this.$el.html(this.template());

    this.collection.models.forEach( function (model) {
    var view = new FriendInListView({model: model});
    view.render();
    that.$el.append(view.el);
    });
    }
    });

    var FriendInListView = BaseView.extend({
    events: {
    "click .remove-btn": "handleRemoveClick"
    },
    handleRemoveClick: function () {
    this.remove();
    this.model.remove();
    },
    template: function (values) {
    return this.renderTemplate('#template-FriendInListView', values);
    },
    render: function () {
    this.$el.html(this.template(this.model.attributes));
    }
    });

    var UserProfileView = BaseView.extend({
    template: function (values) {
    return this.renderTemplate('#template-UserProfileView', values);
    },
    render: function () {
    this.$el.html(this.template(this.model.attributes));
    }
    });

    var preEmployment = new UserCollection(mockUsers);

    var homepageView = new HomepageView({
    el: $('#page')[0]
    });
    homepageView.render();

    </script>
    </body>
    </html>