Простейшие примеры backbone.js

Я создаю пример с голой стороной backbone, чтобы попытаться изучить его, и у меня возникают проблемы с отображением моего представления. Я основал его на учебнике Thomas Davis но просмотрел многие другие приложения и учебные пособия.

Я меняю учебник Дэвиса не только потому, что хочу добавить окно ввода, но также потому, что на основе базовых документов я думал, что ему нужно меньше кода и другой структуры. Очевидно, потому что я не могу заставить это работать, я не знаю, что нужно, а что нет.

Моя конечная цель состояла в том, чтобы просто добавить имена в теги li внутри ul#friends-list, хотя я не думаю, что el: 'body' поможет мне там.

Что я делаю неправильно? Спасибо за любую помощь.

Мой 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 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>

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

Ответы

Ответ 1

У вас были некоторые фундаментальные проблемы с вашим кодом, чтобы получить необходимую функциональность. Я превратил ваш код в jsfiddle, и вы можете увидеть здесь рабочее решение.

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

код

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

Я заметил, что вам нужен как можно меньше кода, поэтому я оставил некоторые вещи, которые вам не нужны, например объявление реальной модели. Это может быть проще, если вы используете коллекцию, как в примере.

Также я только что запустил новый сайт, содержащий уроки Backbone, которые могут помочь решить вашу проблему.

BackboneTutorials.com