Pembinaan persekitaran rangka kerja JavaScript Backbone.js dan Hello world example

Pembinaan persekitaran rangka kerja JavaScript Backbone.js dan Hello world example_Pengetahuan asas

WBOY

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

asal

1799 orang telah melayarinya

Persediaan alam sekitar
Sebelum mempelajari Backbone secara formal, anda perlu menyediakan beberapa perkara:
Mula-mula, anda perlu mendapatkan fail sumber kerangka Backbone: http://documentcloud.github.com/backbone/
Backbone bergantung pada kaedah asas rangka kerja Underscore, jadi anda juga perlu memuat turun fail sumber rangka kerja Underscore: http://documentcloud.github.com/underscore/
Dalam Backbone, operasi pada DOM dan acara bergantung pada perpustakaan pihak ketiga (seperti jQuery atau Zepto Anda hanya perlu memilih satu untuk memuat turun:
). jQuery: http://jquery.com/
Zepto: http://zeptojs.com/
Nampaknya agak menyusahkan, tetapi tujuan Backbone adalah untuk menggunakan rangka kerja mudah untuk membina aplikasi yang kompleks, jadi masalah tidak bermakna ia rumit.
Anda boleh membuat halaman HTML baharu dan memperkenalkan bingkai ini, seperti ini:

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

Salin selepas log masuk

Pada ketika ini, anda telah menyediakan persekitaran yang diperlukan untuk menjalankan Backbone.

Hello World
Mari kita bincangkan dahulu tentang fungsi helloworld ini: Terdapat butang laporan pada halaman Klik kotak input pop timbul, masukkan kandungan, sahkan, dan akhirnya kandungan akan ditambahkan ke halaman. Gambar muka surat adalah seperti berikut:

201657111923472.jpg (1366×768)

Lihat kod di bawah:

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

Salin selepas log masuk

Saya rasa kod ini adalah intuitif Ia melibatkan tiga bahagian tulang belakang, pandangan, model dan koleksi, yang akan disebut kemudian , dan lihat Ia digunakan untuk memproses halaman dan logik halaman mudah.