0

Backbone.js をより理解するために、Backbone.js を使用したダミーのブログを作成しました。「投稿を作成」ボタンがあります。そのボタンをクリックすると、次のように実行されます。

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

(makeId()ランダムな文字を生成するだけです。)
Create は、addリッスンするイベントをディスパッチする必要があります。そのaddイベントは 1 回だけディスパッチされます。どうしてか分かりません。私が試したことを示すために、コードにたくさんの 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>
4

1 に答える 1

1
  • idBackbone はコレクションに同じモデルを追加しません。
  • モデルのデフォルトidは空の文字列に設定されていますが、undefinedまたは以外の値nullは同じ結果をもたらします。
  • サーバーから返されるモデルにはidセットがなく、デフォルトのモデルが使用されます。

何が起こるかというと、最初に作成されたモデルがデフォルトidを取り、コレクションに追加されます。2 番目のものを作成すると、デフォルトでインスタンス化されますidが、コレクションに追加することはできません。デモについては、 http://jsfiddle.net/nikoshr/vfEVC/を参照してください。

コレクション内の両方のインスタンスを取得するには、デフォルトを削除するidか、1 つのサーバー側を割り当てます。

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

于 2013-05-29T12:36:49.563 に答える