/java-script/

Backbone simple example, article list with details

2012-12-18 14:55:36

github post.js

var Post = {   
    Router : null,
    Model : null,
    Collection : null,
    View : {}
}

//-------------Router-------------
Post.Router = Backbone.Router.extend({
    //_this : this,
    routes: {
        "": "index",
        "more": "more",
        "post/:id": "show"
    },
    index : function(){
       var list = new Post.Collection();
           list.fetch( { data: $.param({ page: 1 }), success: function ( list ) {
                   new Post.View.List( { collection: list } );
           } } );
    },
    show : function( _id ){
        var one = new Post.Model( {id:_id} );
        one.fetch({
            success: function ( item ) {
                new Post.View.Details( { model: item } );
            }
        })
    }
});

//-------------Model-------------
Post.Model = Backbone.Model.extend({
    defaults:{
        id:'',
        title: '',
        content: ''
    },
    urlRoot: '/data/post.json?='
});

//-------------Collection-------------
Post.Collection = Backbone.Collection.extend({
    model: Post.Model,
    url: '/data/posts.json'
});

//-------------View List & List Item-------------
Post.View.List = Backbone.View.extend({
    initialize: function(){
        _.bindAll(this, 'render');
        this.collection.bind('reset', this.render);
        this.render();
    },
    render: function(){
        $('#mainContainer').html('');
        this.collection.each( this.renderOne );
    },
    renderOne: function( model ){
        view = new Post.View.List.Item({ model: model });
        $('#mainContainer').append(view.render());
    }
});

Post.View.List.Item = Backbone.View.extend({
    template: _.template($("#postItem").html()),
    initialize: function () {},
    render: function () {
        return $(this.el).append(this.template(this.model.toJSON())) ;
    }
})

//-------------View Details-------------
Post.View.Details = Backbone.View.extend({
    el: $('#mainContainer'),
    template: _.template($("#postOne").html()),
    initialize: function(){
        _.bindAll(this, 'render');
        //this.collection.bind('reset', this.render);
        this.render();
    },
    render: function(){
        var template = _.template( this.template( this.model.toJSON() ) );
        $(this.el).html( template );
    }
});

var appRouter = new Post.Router();
Backbone.history.start();

posts.json

[
    {
        "id": "11",
        "title": "Single Page Application",
        "short": "This simple application is not finished but I want to publish demo of my idea..."
    },
    {
        "id": "10",
        "title": "CodeIgniter problem with prettyPhoto.",
        "short": "If You want add ajax content to CodeIgniter with prettyPhoto ..."
    },
    {
        "id": "9",
        "title": "Redactor WYSIWYG problem with alt+z",
        "short": "Redactor is a great WYSIWYG but …. In some Windows, I checked ..."
    }

]

post.json

{
    "id": "11",
    "title": "Single Page Application",
    "short": "This simple application is not finished but I want to publish demo of my idea..."
}

index.html


<html>
<head>
<title>Post</title>
</head>
<body>
<h1></h1>
<div id='"mainContainer"'>
</div>
<script id='"postItem"' type='"text/template"'>
            <li>
                <%= id %>
                <%= title %>
                <%= content %>
                <a href=&quot;#post/<%= id %>&quot;>link</a>
            </li>
        </script>
<script id='"postOne"' type='"text/template"'>
            <%= id %>
            <%= title %>
            <a href=&quot;#&quot;>back</a>
        </script>
<script src='"/libs/jquery.js"' type='"text/javascript"'></script>
<script src='"/libs/underscore.js"' type='"text/javascript"'></script>
<script src='"/libs/backbone.js"' type='"text/javascript"'></script>
<script src='"/modules/post.js"' type='"text/javascript"'></script>
</body>
</html>