4

バックボーンで簡単なToDoアプリケーションを構築しています。私のhtmlは：

<!DOCTYPE html>
<html>
<head>
<title>back bone</title>
<script src="js/lib/jquery.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<h2>Total Things Todo: <div id="no-todo"> 0 </div></h2>
<ul id="todo-list" class="unstyled">
</ul>
<div>
<button class="btn" id="add-todo"><i class="icon-plus"></i>Add Todo</button>
</div>
<script src="js/script.js"></script>

</body>
</html>

私のバックボーンコードは次のようになります。

$(document).ready(function(){
    var Todo = Backbone.Model.extend({
        id: 0,
        text:null,
        completed: false
    });
    var Todos = Backbone.Collection.extend({
        model:Todo,
        initialize: function(models, options) {
            this.on("add",options.view.addTodoLi);
        }
    });
    var AppView = Backbone.View.extend({
        el: $("body"),
        initialize: function() {
            this.todos = new Todos(null,//[{id: 0,completed: false,text: "helo"},{id: 1,completed: false,text: "bye"}],
                {view: this });
        },
        events: {
            "click #add-todo": "addTodo"
        },
        addTodo: function() {
            var todo_name = prompt("What do you have to do?");
            var todo_model = new Todo({id: 0,completed: false,text: todo_name});
            this.todos.add(todo_model);
            console.log("todos",this.todos.toJSON(),
                todo_name,todo_model.toJSON());
        },
        addTodoLi: function(model){
            $("#todo-list").append("<li><div class='done-false'><input type='checkbox'/>"+model.get("text")+"</div></li>");
        }
    });
    var appview =  new AppView;
});

問題は単純です。何らかの理由で、の機能が最初から.add機能してthis.todosいません。addイベントも1回だけトリガーされます。これは、コレクションが不変になったかのようです。明らかな何かを見逃したことがありますか？

4

1 に答える 1

11

このコレクションは、同じを持っているモデルを追加できないようにするだけですid。異なるモデルを追加する場合は、idすべてが正常に機能するはずです。あなたの場合、本当に自分でIDを管理するつもりがない場合は、モデルのインスタンス化時にIDを省略して、バックボーンに生成させることができます。

于 2012-07-09T07:27:39.817 に答える