3

バックボーン ビューについての私の理解では、モデル データを表示する必要がある各 html 要素は、それ自体でビューになることができます。

モデル データを表示するために、特定の 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);

}); </p>

しかし、elに「body」を使用すると、思い通りに機能します。

el を特定の div に設定するにはどうすればよいですか?

4

2 に答える 2

7

ソリューション 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>

</ p> 

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

</ p>

于 2012-09-06T11:04:55.467 に答える
1

「#view1」を使用する場合

"keypress #new-todo":  "createOnEnter"

#new-todo が「#view1」内にないため、バインドされていません。API を確認してください。

于 2012-09-06T10:02:33.747 に答える