javascript - Backbone.js の View.el に新しい要素を追加できない

Question

私は現在バックボーンを学んでおり、次の問題に直面しています。View の this.el 要素に新しい要素を追加したいと考えています。しかし、それは起こりません。ここに私のコードがあります:

var MyData = Backbone.Model.extend({
    initialize: function() {
        this.bind('error', function(model, error) {
            console.log('error:' + error);
        });
    },
    defaults: {
        name: "Jo",
        age: 18,
        skill: 0
    },
    validate: function(attributes) {
        if (attributes.name == "Jonh")
            return false;
        return true;
    }
});

var MyView1 = Backbone.View.extend({
    initialize: function() {
        this.$el.empty();
    },
    el: '#middle',
    events: {
        "click": "render"
    },
    render: function() {
        this.$el.append(this.model.get('name'));    
    }
});

var myData = new MyData();
var myView1 = new MyView1( {model: myData} );

int html ファイルには、次のように定義された div 要素があります。

<div id="middle"></div>

コードはエラーなしで動作しますが、追加された要素は表示されません。私はまた、このように追加しようとしました:

this.$el.append($("<p>").append(this.model.get('name')));