backbone.js最简单的例子

Question

backbone.js最简单的例子

javascriptbackbone.js

48

我正在创建一个极简的backbone示例，以尝试学习它，并且在尝试渲染我的视图时遇到了问题。我基于Thomas Davis的教程和其他许多应用程序和教程进行了研究。

我对Davis的教程进行了修改，不仅是因为我想添加输入框，而且因为根据backbone文档，我认为它需要更少的代码和不同的结构。显然，因为我无法使其正常工作，我不知道需要什么以及不需要什么。

我的最终目标只是在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'});
});

- joshvermaire

你的问题是什么？ - Vlad Gurovich

我无法使我的视图渲染。如何让模型在 ul 中列出？ - joshvermaire

1

首先，您只编写了单个朋友的视图。您还没有为集合（FriendList）编写视图。在backbone中，视图并没有什么神奇之处。您需要手动构建它们。这意味着您需要一个“class FriendListView extends Backbone.View”，其中包含一个渲染方法，该方法遍历集合并将<li>项附加到ul中。 - bradgonesurfing

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thomas Davis · Accepted Answer

您的代码存在一些基本问题，无法满足您所需的功能。我将您的代码转化为了一个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'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'});
});

我注意到你希望尽可能少的代码，因此我省略了一些不需要的内容，比如声明一个实际的模型。使用像示例中那样的集合可能会更容易。

另外，我刚刚推出了一个包含Backbone教程的新站点，这可能有助于解决你的问题。

BackboneTutorials.com