contenteditable and emberjs

Question

Tôi có một cái nhìn contentEditable rằng khi tôi focusOut tôi nhận được html nhập vào và lưu nó.

Nhưng khi tôi loại bỏ tất cả các văn bản từ contenteditable và sau đó tập trung ra tôi nhận được lỗi

Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM. 

Xin xem jsfiddle này và xóa văn bản value1 và tập trung ra.

http://jsfiddle.net/rmossuk/Q2kAe/8/

Bất kỳ ai có thể trợ giúp điều này?

Trân Rick

Answer 1

bạn EditableView bộ lên một màn hình gắn vào content.value của nó:

<script type="text/x-handlebars" data-template-name="editable"> 
    {{view.content.value}} 
</script> 

Ember thực hiện nó kỳ diệu ràng buộc-cập nhật bằng cách gói những phần có liên quan với các thẻ đánh dấu kịch bản. Hãy nhìn vào DOM kết quả:

Bây giờ bạn thực hiện quan điểm của bạn có thể chỉnh sửa. Ngay sau khi người dùng xóa hoàn toàn nội dung của khung nhìn, bạn sẽ nhận thấy rằng các thẻ tập lệnh xung quanh cũng bị xóa (bởi trình duyệt). Tại thời điểm Ember cố gắng cập nhật màn hình, nó sẽ không tìm thấy các thẻ script cần thiết và do đó phàn nàn.

Tôi không nghĩ rằng bạn có thể làm cho phương pháp này hoạt động đáng tin cậy với contenteditable, vì bạn sẽ không thể kiểm soát trình duyệt rời khỏi môi trường xung quanh Ember nguyên vẹn. Tôi đoán bạn sẽ cần phải chăm sóc quan điểm cập nhật bản thân: loại bỏ các ràng buộc, tạo ra một quan sát viên content.value và cập nhật các DOM một cách rõ ràng:

App.EditableView = Em.View.extend({ 
    contenteditable: "true", 
    attributeBindings: ["contenteditable"], 

    _observeContent: (function() { 
     this._displayContent(); 
    }).observes('content.value'), 

    didInsertElement: function() { 
     this._displayContent(); 
    }, 
    _displayContent: function() { 
     this.$().html(this.get('content.value')); 
    }, 
    ... 

Đây là một JSFiddle với một bản demo của giải pháp này: http://jsfiddle.net/green/BEtzb/2/.

(Bạn có thể dĩ nhiên cũng sử dụng một Ember.TextField trong đó sử dụng một trường nhập thường xuyên và cung cấp tất cả sự kỳ diệu ràng buộc, nếu đó là tất cả các bạn cần.)