web-dev-qa-db-fra.com

Exemples simples de backbone.js

Je crée un os nus backbone exemple pour essayer de l'apprendre et j'ai des problèmes pour que ma vue soit rendue. Je l'ai basé sur Thomas Davis tutoriel mais j'ai regardé la plupart des autres applications et tutoriels disponibles.

Je modifie le tutoriel de Davis non seulement parce que je veux ajouter une zone de saisie, mais aussi parce que sur la base des documents de base, je pensais qu'il avait besoin de moins de code et d'une structure différente. Évidemment parce que je ne peux pas faire fonctionner cela, je ne sais pas ce qui est nécessaire et ce qui ne l'est pas.

Mon objectif ultime était d'ajouter simplement les noms dans les balises li dans ul#friends-list, bien que je ne pense pas el: 'body' m'aidera là-bas.

Qu'est-ce que je fais mal? Merci pour toute aide.

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

Mon 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'});
});
javascriptbackbone.js
47
joshvermaire

Vous avez eu des problèmes fondamentaux avec votre code pour obtenir les fonctionnalités dont vous aviez besoin. J'ai transformé votre code en jsfiddle et vous pouvez voir la solution de travail ici.

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

Code 

<!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'});
});

J'ai remarqué que vous vouliez le moins de code possible, j'ai donc omis certaines choses dont vous n'avez pas besoin, comme déclarer un modèle réel. Cela pourrait être plus facile si vous utilisez une collection comme dans l'exemple à la place.

Je viens également de lancer un nouveau site contenant des didacticiels Backbone qui pourraient aider à résoudre votre problème.

BackboneTutorials.com

88
Thomas Davis