javascript - 主干无法从模板中找到输入字段元素

Question

我有一个表单 View 。我通过以下方式将新模型加载到 View 中:

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

在 initialize 函数上，我希望它吐出 initialize form! 因为默认名称值是空引号，但我得到的是 initialize form! undefined 表明表单在初始化开始时尚未呈现。

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

View :

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>

Answer 1

你的 this.$namein 是在你的 initialize 方法中初始化的，它在渲染之前执行，所以 this.$("#inputName");返回未定义。

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

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