骨干无法从模板中找到输入字段元素

我有一个窗体视图。我打开一个新的模式进入查看方式：骨干无法从模板中找到输入字段元素

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>

来源

2013-06-25 Jesse

这是一个正确的行为。如果你把一个console.log放在render（）中，你会注意到“initialize”发生在“render（）”之前。这意味着，您的模板在Initialize时不会呈现在DOM上。 – addisu

我添加了一些额外的注释 - “另外，createOnEnter函数产生所需的输出，但createOnClick返回未定义，我很困惑。” – Jesse

你这个$ namein在你的初始化方法，它使执行前，初始化，所以这$（“＃。 inputName“）;返回undefined。

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

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

来源

2013-06-25 17:30:39

是的。这就说得通了。谢谢。 – Jesse

骨干无法从模板中找到输入字段元素

回答

相关问题