Javascript 主干收集.add不'；好像不行_Javascript_Jquery_Backbone.js_Backbone.js Collections

Javascript 主干收集.add不'；好像不行

javascript jquery backbone.js

Javascript 主干收集.add不'；好像不行,javascript,jquery,backbone.js,backbone.js-collections,Javascript,Jquery,Backbone.js,Backbone.js Collections,我正在主干网中构建一个简单的to-do应用程序。我的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/li

我正在主干网中构建一个简单的to-do应用程序。我的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>


脊骨
要做的事情总数：0


添加待办事项

我的主干代码如下所示：

$(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;
});

$（文档）.ready（函数（）{
var Todo=Backbone.Model.extend({
id:0，
文本：空，
已完成：false
});
var Todos=Backbone.Collection.extend({
型号：Todo，
初始化：功能（模型、选项）{
this.on（“add”，options.view.addTodoLi）；
}
});
var AppView=Backbone.View.extend({
el:$（“正文”），
初始化：函数（）{
this.todos=newtodos（null，//[{id:0，completed:false，text:“helo”}，{id:1，completed:false，text:“bye”}），
{视图：此}）；
},
活动：{
单击“添加待办事项”：“添加待办事项”
},
addTodo:function（）{
var todo_name=prompt（“您必须做什么？”）；
var todo_model=new todo（{id:0，completed:false，text:todo_name}）；
this.todos.add（todo_模型）；
console.log（“todos”，this.todos.toJSON（），
todo_name，todo_model.toJSON（）；
},
addTodoLi:函数（模型）{
$（“#待办事项列表”）.append（“”+model.get（“text”）+“”）；
}
});
var-appview=新的appview；
});

问题很简单，因为某种原因

。在上添加函数。TODO
在第一次之后不起作用。add
事件也只会触发一次。就好像集合已变得不可变一样。我错过了一些明显的东西吗？
该系列只是阻止您添加具有相同id的型号。如果要添加具有不同id
s的模型，则一切都应该正常工作。在您的情况下，如果您真的不打算自己管理ID，您可以在模型实例化时省略它们，并让主干为您生成它们。
非常感谢，这很有效。我只希望他们对id
的特殊含义给了我一些警告，或者抛出了一个错误/异常。在控制台中，一切正常。当id为空时，主干网不应该检查cid吗？找到了我困境的答案-如果id为“未定义”，则集合可以继续添加其他id未定义的模型。但如果它们是“”（空字符串），则禁止添加。