2

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

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

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

此外，该createOnEnter函数产生所需的输出，但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>
4

1 回答 1

8

Your this.$namein is initialized in your initialize method, which executes before render, so this.$("#inputName"); returns undefined.

Try to put your initialize code at the end of your render method instead. 

render: function() {
   this.$el.html(this.template(this.model.toJSON()));
   this.$namein = this.$("#inputName"); 
   return this;
},
于 2013-06-25T17:30:39.180 回答