BB Skeleton

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<!--
    Result:
    
    <div>
        <select>
            <option value="1">My favourite search 1</option>
            <option value="2">My favourite search 2</option>
        </select>
    </div>
-->



<div id="search_container">a</div>
<script type="text/template" id="search_template">
    <label>Search</label>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</script>

<script type="text/x-handlebars-template" id="search_favourites_template" class="tmpl_search_view">
    <select>
        <span class value="{{title}}">{{title}}</option>
    </select>
</script>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

JavaScript

console.clear();

var favouritesData = [{
    "id": 1,
    "title": "My favourite search 1"
}, {
    "id": 2,
    "title": "My favourite search 2"
}];

SearchView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    render: function() {
        var template = _.template($("#search_template").html(), {});
        this.$el.html(template);
    },
    events: {
        "click input[type=button]": "doSearch"
    },
    doSearch: function(event) {
        alert("Search for " + $("#search_input").val());
    }
});


var Search_view = new SearchView({
    el: $("#search_container")
});




var FavouriteSearch = Backbone.Model.extend();

var FavouriteSearches = Backbone.Collection.extend({
    model: FavouriteSearch,
    initialize: function() {

    },
    render: function() {

    }
});

var FavouriteSearchesView = Backbone.View.extend({
    className: 'favourite_searches',
    tagName: 'select',

    //template: Handlebars.compile( $('.tmpl_search_view').html() ),

    initialize: function() {
        //this.render();
        this.fragment = document.createDocumentFragment();
    },
    render: function() {
        //var template = _.template($("#search_favourites_template").html(), {} );
        //this.$el.html(this.template(this.model.toJSON()));
        //return this;
        this.collection.forEach(this.addFavouriteSearch, this);
        this.$el.html(this.fragment);
        return this;
    },
    addFavouriteSearch: function(favouriteSearch) {
        var favouriteSearchView = new FavouriteSearchView({

        });
        this.fragment.appendChild(favouriteSearchView.render().el);
        return this;
    }
});

var FavouriteSearchView = Backbone.View.extend({
    className: 'favourite-search',
    tagname: 'option',
    template: Handlebars.compile($('.tmpl_search_view').html()),

    initialize: function() {

    },
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
   ...