Aufbau der JavaScript-Backbone.js-Framework-Umgebung und Hello World-Beispiel

Aufbau der JavaScript-Backbone.js-Framework-Umgebung und Hello World-Beispiel_Grundkenntnisse

WBOY

Freigeben： 2016-05-16 15:01:37

Original

1818 Leute haben es durchsucht

Umgebungsvorbereitung
Bevor Sie Backbone offiziell erlernen, müssen Sie einige Dinge vorbereiten:
Zuerst müssen Sie die Quelldateien des Backbone-Frameworks abrufen: http://documentcloud.github.com/backbone/
Backbone basiert auf den grundlegenden Methoden des Underscore-Frameworks, daher müssen Sie auch die Quelldateien des Underscore-Frameworks herunterladen: http://documentcloud.github.com/underscore/
In Backbone basieren Vorgänge auf DOM und Ereignissen auf Bibliotheken von Drittanbietern (wie jQuery oder Zepto). Sie müssen nur eine zum Herunterladen auswählen:
jQuery: http://jquery.com/
Zepto: http://zeptojs.com/
Es scheint ziemlich mühsam zu sein, aber der Zweck von Backbone besteht darin, ein einfaches Framework zum Erstellen komplexer Anwendungen zu verwenden. Probleme bedeuten also nicht, dass es kompliziert ist.
Sie können eine neue HTML-Seite erstellen und diese Frames wie folgt einfügen:

<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>

Nach dem Login kopieren

Zu diesem Zeitpunkt haben Sie die für die Ausführung von Backbone erforderliche Umgebung vorbereitet.

Hallo Welt
Lassen Sie uns zunächst über die Funktionen dieser Hallowelt sprechen: Auf der Seite gibt es eine Schaltfläche zum Melden. Klicken Sie auf das Popup-Eingabefeld, geben Sie den Inhalt ein, bestätigen Sie und schließlich wird der Inhalt zur Seite hinzugefügt. Das Seitenbild sieht wie folgt aus:

201657111923472.jpg (1366×768)

Sehen Sie sich den folgenden Code an:

<!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>

Nach dem Login kopieren

Ich denke, der Code ist intuitiv. Er umfasst die drei Teile Backbone, Ansicht, Modell und Sammlung, die später erwähnt werden. Solange Sie hier verstehen, stellt das Modell ein Datenmodell dar, und die Sammlung ist eine Sammlung von Modellen und view Es wird zum Verarbeiten von Seiten und einfacher Seitenlogik verwendet.