Code .Net: Backbone.js Application

vendredi 13 mars 2015

Backbone.js Application

Backbone.js est un framework JavaScript libre et open-source basé sur la librairie Underscore.js. Créé par Jeremy Ashkenas, il est particulièrement adapté aux Single-page application (applications web monopages).

Backbone.js propose une structure pour les applications web en fournissant des Modèles(Models) avec une liaison clé-valeur et des événements personnalisés, Collections avec une riche API de fonctions énumérables, Views avec événement déclarative, et se connecte tout à votre API existante sur une interface RESTful JSON.

Le projet Backbone.js est hébergé sur GitHub,Il est disponible pour une utilisation avec Licence MIT software license.

Backbone.js est uniquement une couche client, il n’a aucune vocation à gérer la persistence de vos données sur un serveur,mais rassurez vous on a JSON capable de faire cette fonctions en collaboration avec les modèle de Backbone.js

Liste articles avec Backbone.js

Exemple Backbone.js App

index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Exemple Backbone.js App </title>

       <style>
     h1{
          font-size:33px;
    color: darkblue;
     }
      #articles{
    list-style:none;
    margin:0 auto;
    width:600px;
    margin-left:auto;
    margin-right:auto;
   }

   #articles li{
    background-color: #fbfbfc;
    box-shadow:0 1px 1px #eee;
    font-size:15px;
    color: #85898b;
    padding:22px 30px;
    margin-bottom:15px;
    border-radius:4px;
    cursor:pointer;
   }

   #articles li span{
    float:right;
    opacity:0.6;
   }

   #articles li{
    border:1px solid #ccc;
    box-shadow:1px 1px 1px #ccc;
    margin-right:10px;
    width:150px;
    height:16px;
    display:inline-block;
    vertical-align: middle;
   }
  </style>
    </head>

    <body>

        <form id="main" method="post" >
           

            <ul id="articles">
                 <h1>Articles</h1>
            </ul>
        </form>

        <!-- JavaScript  -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>

        <script src="script.js"></script>

    </body>
</html>

Javascript

$(function(){

    var Article = Backbone.Model.extend({
        defaults:{
            title: 'Article'
        }
    });

    var ArticleList = Backbone.Collection.extend({
        model: Article
    });

    var articles = new ArticleList([
        new Article({ title: 'PC Portable'}),
        new Article({ title: 'Imprimante'}),
        new Article({ title: 'Téléphone'}),
        new Article({ title: 'IPAD'})
    ]);

    var ArticleView = Backbone.View.extend({
        tagName: 'li',
        initialize: function(){
            this.listenTo(this.model, 'change', this.render);
        },

        render: function(){
            this.$el.html('<div> ' + this.model.get('title') + '</div>');
            return this;
        }
    });

    var App = Backbone.View.extend({

        el: $('#main'),

        initialize: function(){

          
            this.list = $('#articles');
            this.listenTo(articles, 'change', this.render);
            articles.each(function(Article){

                var view = new ArticleView({ model: Article });
                this.list.append(view.render().el);

            }, this);
        }
    });

    new App();

});

Download : Exemple_Backbone.js

Code .Net

vendredi 13 mars 2015

Backbone.js Application

Exemple Backbone.js App

Aucun commentaire:

Enregistrer un commentaire