the_fun_with_backbone4.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.extend({
            defaults: {
                "category": "Everything"
            }
        })
        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 AddBookmarkView = Backbone.View.extend({
            tagName: "div",
            className: "add_bookmark",
            render: function() {
                this.$el.html($("#add_bookmark").html())
                return this
            }
        })
        var DirectoryView = Backbone.View.extend({
            el: $("#wrapper"),
            events: {
                "change #category_filter select": "set_category",
                "click #show_form_for_adding_bookmark": "show_form_for_adding_bookmark",
                "click .add_bookmark button": "add_bookmark"
            },
            initialize: function() {
                this.collection = new Directory(bookmarks)
                this.render()
                this.on("change:selected_category", this.apply_category, this)
                this.$el.find("#category_filter").append(this.create_select())
            },
            render: function() {
                var that = this
                that.$el.find("#bookmarks").html("")
                that.$el.find("#category_filter option").filter(function(i, el) {
                    return $(el).val() === that.selected_category
                }).prop("selected", true)
                _.each(this.collection.models, function(item) {
                    that.render_bookmark(item)
                })
            },
            render_bookmark: function(bookmark) {
                var bookmark_view = new BookmarkView({
                    model: bookmark
                })
                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 that = this
                    that.collection.reset(bookmarks)
                    var filtered_bookmarks = _.filter(that.collection.models, function(bookmark) {
                        return bookmark.get("category") === that.selected_category
                    })
                    that.collection.reset(filtered_bookmarks)
                    bookmark_router.navigate("category/" + UrlUtil.to_url(that.selected_category))
                }
                this.render()
            },
            show_form_for_adding_bookmark: function(e) {
                e.preventDefault()
                this.$el.append(new AddBookmarkView().render().el)
            },
            add_bookmark: function(e) {
                e.preventDefault()
                var $form = this.$el.find(".add_bookmark")
                  , url = $("#url", $form).val()
                  , title = $("#title", $form).val()
                if (!url) {
                    alert("Empty URL!")
                    return
                }
                if (!title) {
                    alert("Empty title!")
                    return
                }
                var bookmark = new Bookmark({url: url, title: title})
                this.collection.add(bookmark)
                this.render_bookmark(bookmark)
                $form.remove()
            }
        })
        var directory_view = new DirectoryView()
        var bookmark_router = new BookmarkRouter()
        Backbone.history.start()
    })
}(jQuery))