backbone.js如何将el设置为特定的div ID

Question

我对Backbone View的理解是每个需要显示模型数据的html元素都可以是一个View本身。

我希望创建视图链接到特定的div来显示模型数据。 我的问题是，如果我对el使用其他的“body”以外的代码，则代码不起作用。

下面的代码无法正常工作：

http://jsfiddle.net/GhaPF/9/

$(document).ready(function() { 

var ToDo = Backbone.Model.extend({ 
    defaults: { "date": "today", 
       "task": "" 
      }, 
    initialize: function() {} 
}); 

var ToDoList = Backbone.Collection.extend({ 
    model: ToDo 
}); 

var ToDoListView = Backbone.View.extend({ 
    el: "#view1", 
    initialize: function(myTodoList) { 
     this.todolist = myTodoList; 
     this.todolist.bind('add', this.render, this); 
    }, 
    render: function() { 
     text = this.todolist.toJSON(); 
     string = JSON.stringify(text); 
     $(this.el).append(string); 
     return this; 
    }, 
    events: { 
     "keypress #new-todo": "createOnEnter" 
    }, 
    createOnEnter: function(e) { 
     if (e.keyCode != 13) return; 
     if (!$("#new-todo").val()) return; 
     this.todolist.add({"task": $("#new-todo").val()}); 
     $("#new-todo").val(''); 
    } 
}); 

$("#new-todo").focus(); 
var todolist = new ToDoList(); 
var myToDoListView = new ToDoListView(todolist); 

}）;

但是，如果我为el使用“body”，它会按我的意愿工作。

如何将el设置为特定的div？

Answer 1

当您使用 “＃厂景”

"keypress #new-todo": "createOnEnter" 

不绑定，因为＃新待办事项不是 “＃厂景” 之内。检查API。

Answer 2

解决方案 http://jsfiddle.net/r3F8q/

你也可以使用this.setElement('#body1')在渲染

<div id="view-container"> 
    <input id="new-todo" placeholder="text"> 
    <div id="view1"></div> 
    <div id="view2"></div> 
</div> 

$(document).ready(function() { 

var ToDo = Backbone.Model.extend({ 
    defaults: { "date": "today", 
       "task": "" 
      }, 
    initialize: function() {} 
}); 

var ToDoList = Backbone.Collection.extend({ 
    model: ToDo 
}); 

var ToDoListView = Backbone.View.extend({ 
    el: "#view-container", 
    initialize: function(myTodoList) { 
     this.todolist = myTodoList; 
     this.todolist.bind('add', this.render, this); 
    }, 
    render: function() { 
     text = this.todolist.toJSON(); 
     string = JSON.stringify(text); 
     this.$el.find('#view1').append(string); 
     return this; 
    }, 
    events: { 
     "keypress #new-todo": "createOnEnter" 
    }, 
    createOnEnter: function(e) { 
     if (e.keyCode != 13) return; 
     if (!$("#new-todo").val()) return; 
     this.todolist.add({"task": $("#new-todo").val()}); 
     $("#new-todo").val(''); 
    } 
}); 

$("#new-todo").focus(); 
var todolist = new ToDoList(); 
var myToDoListView = new ToDoListView(todolist); 
});