Question

为了更多地了解Backbone.js，我使用Backbone.js创建了一个虚拟博客。我有一个'创建帖子'按钮。当我点击该按钮时，我运行：

posts.create({title: makeid(),content: makeid()})

（makeId()只生成一些随机字符。）
Create应该调度我收听的add事件。 add事件仅发送一次。我不知道为什么。我在代码中留下了一堆console.log来显示我尝试过的内容。在服务器端，我返回创建的所有模型。我似乎无法找到服务器应返回的文档。这是app.js

$(function(){

    var Post = Backbone.Model.extend({
        defaults:{
            id: '',
            title : 'Untitled',
            content: 'No content'
        }, 
        urlRoot : '/posts/'
    });

    var Posts = Backbone.Collection.extend({
        model : Post,
        url: '/posts/'
    });

    var posts = new Posts;

    var PostView = Backbone.View.extend({
        tag: 'li',

        template: _.template($("#post-template").html()),

        events: {
            "click .delete-post" : 'deletePost'
        },

        initalize: function(){
            //this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'destroy', this.remove);
        },

        render: function(){
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        },
        deletePost: function(){
            console.log(this.model);
            this.model.destroy();
            this.$el.remove()
        }
    });

    var AppView = Backbone.View.extend({
        el : $("#home"),

        events:{
            "click #add-post": "addPost"
        },

        initialize: function(){
            this.listenTo(posts, 'add', this.addOne);
            posts.on("add", function(post){
                console.log('post added: ' + post);
            });
            posts.fetch({ update: true });
        },

        addPost:function(){
            console.log('add post')
            posts.create({
                title: makeid(), 
                content: makeid()
            },{success: function(){console.log('success');}
            });
        },

        addOne: function(post){
            console.log('one was added');
            var view = new PostView({model:post});
            this.$("#posts").append(view.render().el);
        },

        render: function(){
            if(posts.length){
                console.log('rendering');
            }
        }
    });
    var appView = new AppView;
});

function makeid()
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 5; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

这是我的index.html

<!doctype html>
<html>
<head>
    <title>Backbone test</title>
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
</head>
<body>


<div class="container">
    <div class="row">
        <div class="span6" id="home">
            <a href="#" id="add-post" class="btn btn-mini btn-success">add post</a>
            <ul id="posts">
            </ul>
        </div>
    </div>
</div>


<script src="/static/js/jquery.js"></script>
<script src="/static/js/underscore.js"></script>
<script src="/static/js/backbone.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/app.js"></script>




<script id="post-template" type="text/x-handlebars-template">
<div class="span4">
    <h3>
        <%- title %>
        <br />
        <a href='#' class='btn btn-mini btn-primary'>edit</a>
        <a href='#' class='btn btn-mini btn-danger delete-post'>delete</a>
    </h3>
    <p><%- content %></p>
</div>
</script>

</body>
</html>

Answer 1

Backbone不会在集合中添加具有相同id的模型。
您的模型将默认id设置为空字符串，但任何非undefined或null的值都会产生相同的结果。
您的服务器返回的模型没有设置id，使用默认设置。

首先创建的模型采用默认的id并添加到集合中。创建第二个时，它也使用默认的id进行实例化，但无法将其添加到集合中。有关演示，请参阅http://jsfiddle.net/nikoshr/vfEVC/。

删除默认id或指定一个服务器端以获取集合中的两个实例。

http://jsfiddle.net/nikoshr/vfEVC/1/

Backbone.js只调度'add'一次

1 个答案: