Maison >interface Web >js tutoriel >Construction de l'environnement du framework JavaScript Backbone.js et exemple Hello World_Connaissances de base

Construction de l'environnement du framework JavaScript Backbone.js et exemple Hello World_Connaissances de base

WBOYoriginal: 2016-05-16 15:01:371836parcourir

Préparation de l'environnement
Avant d'apprendre formellement Backbone, vous devez préparer certaines choses :
Tout d'abord, vous devez obtenir les fichiers sources du framework Backbone : http://documentcloud.github.com/backbone/
Backbone s'appuie sur les méthodes de base du framework Underscore, vous devez donc également télécharger les fichiers sources du framework Underscore : http://documentcloud.github.com/underscore/
Dans Backbone, les opérations sur le DOM et les événements s'appuient sur des bibliothèques tierces (telles que jQuery ou Zepto). Il vous suffit d'en choisir une à télécharger :
. jQuery : http://jquery.com/
Zepto : http://zeptojs.com/
Cela semble assez gênant, mais le but de Backbone est d'utiliser un framework simple pour créer des applications complexes, donc problème ne signifie pas que c'est compliqué.
Vous pouvez créer une nouvelle page HTML et introduire ces frames, comme ceci :

<script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" src="underscore/underscore-min.js"></script> 
<script type="text/javascript" src="backbone/backbone-min.js"></script>

À ce stade, vous avez préparé l'environnement nécessaire pour exécuter Backbone.

Hellow World
Parlons d'abord des fonctions de ce helloworld : Il y a un bouton de rapport sur la page. Cliquez sur la zone de saisie contextuelle, saisissez le contenu, confirmez, et enfin le contenu sera ajouté à la page. L'image de la page est la suivante :

201657111923472.jpg (1366×768)

Regardez le code ci-dessous :

<!DOCTYPE html>
<html>
<head>
    <title>the5fire.com-backbone.js-Hello World</title>
</head>
<body>
<button id="check">报到</button>
<ul id="world-list">
</ul>
<a href="http://www.the5fire.com">更多教程</a>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script>
(function ($) {
    World = Backbone.Model.extend({
        //创建一个World的对象，拥有name属性
        name: null
    });

    Worlds = Backbone.Collection.extend({
        //World对象的集合
        initialize: function (models, options) {
            this.bind("add", options.view.addOneWorld);
        }
    });

    AppView = Backbone.View.extend({
        el: $("body"),
        initialize: function () {
            //构造函数，实例化一个World集合类，并且以字典方式传入AppView的对象
            this.worlds = new Worlds(null, { view : this })
        },
        events: {
            "click #check": "checkIn",  //事件绑定，绑定Dom中id为check的元素
        },
        checkIn: function () {
            var world_name = prompt("请问，您是哪星人&#63;");
            if(world_name == "") world_name = '未知';
            var world = new World({ name: world_name });
            this.worlds.add(world);
        },
        addOneWorld: function(model) {
            $("#world-list").append("<li>这里是来自 <b>" + model.get('name') + "</b> 星球的问候：hello world！</li>");
        }
    });
    //实例化AppView
    var appview = new AppView;
})(jQuery);
</script>
</html>

Je pense que le code est intuitif. Il implique les trois parties du squelette, de la vue, du modèle et de la collection, qui seront mentionnées plus tard. Tant que vous comprenez ici, le modèle représente un modèle de données, la collection est une collection de modèles. , et view Il est utilisé pour traiter les pages et la logique de page simple.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jquery réalise des images de carrousel transparentes gauche et droite_jqueryArticle suivant：jquery réalise des images de carrousel transparentes gauche et droite_jquery

Articles Liés

Voir plus