the_fun_with_backbone3.js

"use strict"
;(function($) {
    $(function() {
        var UrlUtil = {
            to_url: function(url) {
                return url.replace(/\s/, "-")
            },
            from_url: function(url) {
                return url.replace(/-/, " ")
            }
        }

        var bookmarks = [
            {url: "http://google.com/", title: "Google", category: "Search engines"},
            {url: "http://duckduckgo.com/", title: "DuckDuckGo", category: "Search engines"},
            {url: "http://twitter.com/", title: "Twitter", category: "Social networks"},
            {url: "http://facebook.com/", title: "Facebook", category: "Social networks"},
            {url: "http://dagrevis.lv/", title: "daGrevis.lv", category: "Blogs"}
        ]
        var Bookmark = Backbone.Model
        var Directory = Backbone.Collection.extend({
            model: Bookmark
        })
        var BookmarkRouter = Backbone.Router.extend({
            routes: {
                "category/:category": "category_filter"
            },
            category_filter: function(category) {
                category = UrlUtil.from_url(category)
                directory_view.selected_category = category
                directory_view.trigger("change:selected_category")
            }
        })
        var BookmarkView = Backbone.View.extend({
            tagName: "div",
            className: "single_bookmark",
            template: $("#single_bookmark").html(),
            render: function() {
                var template = _.template(this.template)
                this.$el.html(template(this.model.toJSON()))
                return this
            }
        })
        var DirectoryView = Backbone.View.extend({
            el: $("#wrapper"),
            events: {
                "change #filter select": "set_category"
            },
            initialize: function() {
                this.collection = new Directory(bookmarks)
                this.render()
                this.on("change:selected_category", this.apply_category, this)
                this.$el.find("#filter").append(this.create_select())
            },
            render: function() {
                var that = this
                that.$el.find("#bookmarks").html("")
                _.each(this.collection.models, function(item) {
                    that.render_bookmark(item)
                })
            },
            render_bookmark: function(item) {
                var bookmark_view = new BookmarkView({
                    model: item
                })
                this.$el.find("#bookmarks").append(bookmark_view.render().el)
            },
            get_categories: function() {
                return _.uniq(this.collection.pluck("category"))
            },
            create_select: function() {
                var select = $("<select>")
                  , categories = this.get_categories()
                categories.unshift("Everything")
                _.each(categories, function(item) {
                    $("<option>", {
                        value: item,
                        text: item
                    }).appendTo(select)
                })
                return select
            },
            set_category: function(e) {
                this.selected_category = $(e.currentTarget).val()
                this.trigger("change:selected_category")
            },
            apply_category: function() {
                if (this.selected_category === "Everything") {
                    this.collection.reset(bookmarks)
                    bookmark_router.navigate("category/Everything")
                } else {
                    var selected_category = this.selected_category
                      , filtered_categories = _.filter(bookmarks, function(item) {
                            return item.category === selected_category
                        })
                    this.collection.reset(filtered_categories)
                    selected_category = UrlUtil.to_url(selected_category)
                    bookmark_router.navigate("category/" + selected_category)
                }
                this.render()
            }
        })
        var directory_view = new DirectoryView()
        var bookmark_router = new BookmarkRouter()
        Backbone.history.start()
    })
}(jQuery))