最简单的backbone.js 示例答案

【问题标题】：Simplest of backbone.js examples最简单的backbone.js 示例
【发布时间】：2011-04-03 05:45:49
【问题描述】：

我正在创建一个简单的 backbone 示例来尝试学习它，但在渲染我的视图时遇到了问题。我以 Thomas Davis 的 tutorial 为基础，但查看了许多其他可用的应用程序和教程。

我正在更改 Davis 的教程，不仅因为我想添加一个输入框，还因为基于主干文档，我认为它需要更少的代码和不同的结构。显然，因为我无法让这个工作，我不知道需要什么，不需要什么。

我的最终目标是在ul#friends-list 中添加li 标签中的名称，尽管我认为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'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>

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

【问题讨论】：

你的问题到底是什么？
我无法渲染视图。如何让模型在ul 中列出？
首先你只为一个朋友写了一个视图。您还没有为集合 (FriendList) 编写视图。主干视图中没有魔法。您必须手动构建它们。这意味着您需要一个带有渲染方法的“类 FriendListView 扩展 Backbone.View”，该方法遍历集合并将
项附加到 ul

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