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

Question

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

我希望创建链接到特定div的视图以显示模型数据.我的问题是,如果我使用除'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);

});

但是,如果我使用'body'作为el,它可以按照我的意愿工作.

如何将el设置为特定div？

Answer 1

解决方案 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);
});

​