VICTOR CAVALCANTE

27/07 - online

 

02/08 - 03/08 - Rio de Janeiro

API para acesso a dados

Autenticação

Menos server Side, mais client side

Menos arrastar e soltar, mais HTML codificado à mão

Menos poluição no HTML, mais CSS

Menos uso do HTML para design, mais foco na semântica

Mais Javascript, muito mais javascript

Front End

(Backbone.js)

Back End 

(ASP.NET WEB API)

https://github.com/vcavalcante/BackboneDemoCodificando 

App.Models.Todo = Backbone.Model.extend({
    defaults: {
        'status': 'incomplete'
    },
    toggleStatus: function () {

        if (this.get('status') === 'incomplete') {
            this.set('status', 'complete');
        } else {
            this.set('status', 'incomplete');
        }
        this.save();
    }
});

App.Collections.Todo = Backbone.Collection.extend({
    model: App.Models.Todo,
    url: "/api/todo"
});

App.Views.Todo = Backbone.View.extend({
    initialize: function () {
        this.model.on("change", this.render, this);
    },
    events: { "change input": "toggle" },
    toggle: function () {
        this.model.toggleStatus();
    },
    tagName: "li",
    template: _.template("<%=description%>"),
    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
        return this.$el;
    }
});

App.Views.Todos = Backbone.View.extend({  //initialize collection
    tagName: "ul",
    render: function () {
        this.$el.empty();
        this.collection.forEach(this.addOne, this);
        return this.$el;
    },
    addOne: function (todo) {
        var todoView = new App.Views.Todo({ model: todo });
        this.$el.append(todoView.render());
    }
});

App.Views.Todos = Backbone.View.extend({

    initialize: function () {
        this.listenTo(this.collection, "add", this.addOne, this);
        this.listenTo(this.collection, "reset", this.render, this);
    },

 
    tagName: "ul",
    render: function () {
        this.$el.empty();
        this.collection.forEach(this.addOne, this);
        return this.$el;
    },
    addOne: function (todo) {
        var todoView = new App.Views.Todo({ model: todo });
        this.$el.append(todoView.render());
    }
});

 App.Router = Backbone.Router.extend({
    initialize: function () {
        App.Collections.todos = new App.Collections.Todo({
            model: App.Models.Todo
        });
        App.Views.todos = new App.Views.Todos({
            el: $("#app ul"),
            collection: App.Collections.todos
        });
        App.Views.addTodo = new App.Views.AddTodo({
            el: "#app form", collection: App.Collections.todos
        });
        App.Views.addTodo.render();
        App.Collections.todos.fetch();
    }
});

routes: {
    "all": "all",
    "done": "done",
    "todo": "todo"
}, 
all: function () { 
   $(".brand").html("All"); 
},
done: function () { 
   $(".brand").html("done"); 
},
todo: function () { 
   $(".brand").html("todo"); 
}

Backbone.history.start();
App.router = new App.Router();