Javascript 主干网可以'；无法从模板中找到输入字段元素

我有一个窗体视图。我通过以下方式将新模型加载到视图中：

app.fView = new app.FormView({model: new app.aName});
this.$("#formSpace").append(app.fView.render().el);

在

initialize

函数中，我希望它吐出

初始化表单因为默认名称值是空引号，但是我得到的是
初始化表单！未定义
表示表单在初始化开始时尚未呈现

此外，
createOnCenter
函数生成所需的输出，但
createOnClick
返回未定义的输出。我很困惑

观点：

app.FormView = Backbone.View.extend({

tagName: 'div',

className: 'nameGenForm',

template: _.template($('#form-template').html()),

events: {
    "keyup #nameEntry"  : "createOnEnter",
    "click #addNameButton"  : "createOnClick",
    "submit #nameEntry"     : "submitFail"
},

render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
},

initialize: function() {
    this.$namein = this.$("#inputName");        
    console.log('initialize form! ' + this.$("#inputName").val());
},  

submitFail: function() {

    return false;
},

createOnEnter: function(e) {
    console.log('enter! ' + this.$("#inputName").val());

    if (e.keyCode != 13) return;
    if (!this.$namein.val()) return;

    //this.createNew();
},

createOnClick: function(e) {

    console.log('createOnClick ' + this.$namein.val());
    if (!this.$namein.val()) return;
    console.log('clicked! ' + this.$namein.val());

    //this.createNew();
},

createNew: function() {
    app.Names.create({
        name: this.$namein.val(),
        gender: $('#nameEntry .genderButton[class*="active"]').val()
    });

    this.remove();
},

testing: function() {
    this.$("#nameEntry").submit( function() {
        alert('submitted again');
        return false;
    });
    console.log('current value ' + this.$("#inputName").val());
},

clear: function() {
    console.log('removing!');
    this.remove();
}

});

这是模板

    <script type = "text/template" id = "form-template">
        <form class = "form-horizontal" id = "nameEntry">
            <div class = "control-group">
                <label class = "control-label" for = "inputName">Person's Name</label>
                <div class = "controls">
                    <input type = "text" id = "inputName" placeholder = "Name" value = "<%- name %>"/>
                </div>
            </div>
            <div class = "control-group">
                <label class = "control-label" for = "inputGender">Gender</label>
                <div class = "controls">
                    <div class = "btn-group" data-toggle = "buttons-radio">
                        <button type = "button" class = "genderButton btn <%= gender == 'Male' ? 'active' : '' %>" value = "Male">Male</button>
                        <button type = "button" class = "genderButton btn <%= gender == 'Female' ? 'active' : '' %>" value = "Female">Female</button>
                    </div>
                </div>
            </div>
            <div class = "control-group">
                <div class = "controls">
                    <button type = "button" class = "btn" id = "addNameButton">
                        <%= app.appState.get('action') === 'edit' ? 'Save' : 'Add Name' %>
                    </button>
                </div>
            </div>
        </form>
    </script>


人名
性别
男性
女性
您的this.$namein在您的initialize方法中初始化，该方法在渲染之前执行，因此this.$（“#inputName”）；返回未定义的

尝试将初始化代码放在渲染方法的末尾

render: function() {
   this.$el.html(this.template(this.model.toJSON()));
   this.$namein = this.$("#inputName"); 
   return this;
},

这是正确的行为。如果在render（）中放置console.log，您将注意到“initialize”发生在“render（）”之前。这意味着，在初始化时，您的模板没有在DOM上呈现。我添加了一些额外的注释-“此外，CreateOnCenter函数生成所需的输出，但createOnClick返回未定义的。我感到困惑。”是的。这是有道理的。谢谢