Backbone.js en basit örnek

SORU

3 NİSAN 2011, Pazar

Backbone.js en basit örnek

Bare bones backbone Bir örnek, bunu öğrenmek için denemek için yaratıyorum ve sorunları işlemek için benim görünüm elde yaşıyorum. tutorial Thomas Davis dayalı ettim ama diğer uygulamalar ve rehberler mevcut birçok baktı.

Bir giriş kutusu eklemek istiyorum çünkü sadece Davis'in öğretici değiştiriyorum, ama aynı zamanda omurga docs göre, çünkü daha az kod ve farklı bir yapıya ihtiyacı olduğunu düşündüm. Belli ki bu işe alamam, çünkü ihtiyaç duyulan şey bilmiyorum ve ne değildir.

Benim nihai hedefi sadece el: 'body' bana bu konuda yardım edeceğini sanmıyorum, ancak ul#friends-list içinde li kategori isimleri ekleyin.

Neyi yanlış yapıyorum? Herhangi bir yardım için teşekkürler.

Benim html:

<!DOCTYPE HTML>
<html>
<head>
<title>Tut</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
</head>
<body>

<input type="text" placeholder="Enter friend's name" id="input" />
<button id="add-input">Add Friend</button>

<ul id="friends-list">
</ul>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

Benim test.js

$(function() {

Friend = Backbone.Model.extend();
//Create my model

var friends = new Friend([ {name: 'Eddard Stark'}, {name: 'Robert Baratheon'} ]);
//Create new models to be used as examples


FriendList = Backbone.Collection.extend({
    model: Friend
});
//Create my collection

var friendslist = new FriendList;
//Created to hold my friends model


FriendView = Backbone.View.extend({

    tagName: 'li',

    events: {
        'click #add-input':  'getFriend',
    },

    initialize: function() {
        _.bindAll(this, 'render');
    }, 

    getFriend: function() {
        var friend_name = $('#input').val();
        var friend_model = new Friend({name: friend_name});
    },

    render: function() {
        console.log('rendered')
    },

});

var view = new FriendView({el: 'body'});
});

CEVAP

7 NİSAN 2011, PERŞEMBE

Thomas Davis burada, sizin kod ile bazı temel sorunlar, gerekli işlevselliği almak zorunda kaldı. Bir jsfiddle içine kodunuzu döndüm ve çalışmaya çözümü burada görebilirsiniz.

http://jsfiddle.net/thomas/Yqk5A/

Kod

<!DOCTYPE HTML>
<html>
<head>
<title>Tut</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
</head>
<body>

<input type="text" placeholder="Enter friend's name" id="input" />
<button id="add-input">Add Friend</button>

<ul id="friends-list">
</ul>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

$(function() {

FriendList = Backbone.Collection.extend({
    initialize: function(){

    }
});

FriendView = Backbone.View.extend({

    tagName: 'li',

    events: {
        'click #add-input':  'getFriend',
    },

    initialize: function() {
        var thisView = this;
        this.friendslist = new FriendList;
        _.bindAll(this, 'render');
        this.friendslist.bind("add", function( model ){
            alert("hey");
            thisView.render( model );
        })
    },

    getFriend: function() {
        var friend_name = $('#input').val();
        this.friendslist.add( {name: friend_name} );
    },

    render: function( model ) {
        $("#friends-list").append("<li>"  model.get("name") "</li>");
        console.log('rendered')
    },

});

var view = new FriendView({el: 'body'});
});

Gerçek bir model ilan gibi İhtiyacınız olmayan şeyler bıraktım o yüzden mümkün olduğunca az kod olarak istediğini fark ettim. Eğer bu örnek yerine bir koleksiyon kullanırsanız daha kolay olur.

Ayrıca yeni bir site sorununuzu çözmenize yardımcı olabilecek Omurga eğitimlerini içeren başlattı.

BackboneTutorials.com

Bunu Paylaş: