如何在骨干视图中创建内联编辑？

Question

所以我试图让我的骨干模型中的字段在视图中被调用，由模型进行编辑和验证。我该如何去做呢？我知道有一种做contenteditable =“true”的html方式，但我正在寻找一种更加以骨干为导向的方式，或者一种实际上也能够验证的方式。

这是我的main.js文件的当前代码（但我没有试图.append它，我希望它留在原地，并试图找出如何让字段被具体调用取决于哪文本他们点击最后按钮应该改变太多（保存更改）

的main.js

App.Models.User = Backbone.Model.extend({ 
     defaults: { 
      firstName: 'first', 
      lastName: 'last', 
      email: 'Email', 
      phone: '222', 
      birthday: 'date' 
     }, 

     validate: function (attrs) { 
      if (!attrs.firstName) { 
       return 'You must enter a real first name.'; 
      } 
      if (!attrs.lastName) { 
       return 'You must enter a real last name.'; 
      } 
      if (attrs.email.length < 5) { 
       return 'You must enter a real email.'; 
      } 
      if (attrs.phone.length < 10 && attrs.phone === int) { 
       return 'You must enter a real phone number, if you did please remove the dash and spaces.'; 
      } 
      if (attrs.city.length < 2) { 
       return 'You must enter a real city.'; 
      } 
     } 

    }); 

App.Views.UserUpdate = Backbone.View.extend({ 
     model: App.Models.User, 
     events: { 
      'click .edit': 'editUserProfile' 
     }, 

     editUserProfile: function(field) { 
      var field = 
      $('#user').append('<input type="text" class="edit" placeholder="' + field+'" /> '); 
     }, 

     initialize: function() { 
      this.model.on('change', function() { 
       this.render(); 
      }, this); 
     }, 

     render: function() { 
      this.$el.html(this.model.get('email')); 
     } 

    }); 

这是玉文件：。

extends layout 
block content 
    div.centerContent 
     script(type="text/javascript", src="/js/main.js") 

     h4 User goes here with equal before it no space 
     div(contenteditable="true") 
      form#user 
       - var firstName = "John" 
       - var lastName = "Smith"   
       label #{firstName} #{lastName} 
       - var email = "test@test.com" 
       label.edit #{email} 
       - var phone = "555-555-5757" 
       label #{phone} 
       - var pin = "PIN: LIO20001"  
       label #{pin} 
       - var birthday = "07/28/1982" 
       label #{birthday} 
      button Post 
     hr 

     div.user User 
      p 
       button.edit Edit 

Answer 1

我有CREA泰德这个小提琴：http://jsfiddle.net/LTGjT/18/

您应该指定每个编辑标签contenteditable和id：

- var firstName = "John" 
- var lastName = "Smith"   
label #{firstName} #{lastName} 
- var email = "test@test.com" 
label(contenteditable="true", id="email") #{email} 
- var phone = "555-555-5757" 
label(contenteditable="true", id="phone") #{phone} 
- var birthday = "07/28/1982" 
label(contenteditable="true", id="birthday") #{birthday} 

的原因是认识到通过获取event.target，在你的旧代码正在编辑什么标签event.target将永远是父母div。

然后在backbone听input事件标签的变化，然后更新模型：

App.Models.User = Backbone.Model.extend({ 
    defaults: { 
     firstName: 'first', 
     lastName: 'last', 
     email: 'abc@abc.com', 
     phone: '222', 
     birthday: '01/01/2001' 
    }, 

    initialize: function() { 
    }, 

    validate: function (attrs) { 
     if (!attrs.firstName) { 
      return 'You must enter a real first name.'; 
     } 
     if (!attrs.lastName) { 
      return 'You must enter a real last name.'; 
     } 
     if (attrs.email.length < 5) { 
      return 'You must enter a real email.'; 
     } 
     if (attrs.phone.length < 10 && attrs.phone === int) { 
      return 'You must enter a real phone number, if you did please remove the dash and spaces.'; 
     } 
     if (attrs.city.length < 2) { 
      return 'You must enter a real city.'; 
     } 
    } 

}); 

App.Views.UserUpdate = Backbone.View.extend({ 
    model: App.Models.User, 
    events: { 
     'click button' : 'saveHandler' 
    }, 

    initialize: function() { 
     var self = this; 
     self.render(); 
     console.log(this.model); 
     $('[contenteditable=true]').on('input', function(e){ 
      var field = e.target.id; 
      var value = e.target.innerText; 
      self.model.set(field, value); 
      logUser(self.model); 
     }); 
     self.model.on('change', function(){ 
      $('button').show(); 
     }); 
    }, 

    saveHandler: function(e) { 
     //Validate & Save logic 
     //this.model.save() 
     e.preventDefault(); 
     $(e.target).hide(); 
    }, 

    render: function() { 
     var template = _.template($('#user-view').html()); 
     this.$el.html(template({user: this.model.toJSON()}));    
     $('body').prepend(this.$el); 
     logUser(this.model); 
    } 

});