如何在骨幹視圖中創建內聯編輯？

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); 
    } 

});