KnockoutJS에 대한 contenteditable 바인딩

Question

현재 div를 contenteditable로 지정하기 위해 맞춤 KnockoutJS 바인딩을 구현하려고합니다. http://jsbin.com/ejugip/3/edit

뷰 모델 코드 : 예를 들어, 나는 knockoutJS에서 첫 튜토리얼에서의 ViewModel을하고 "편집 모드"-flag 추가 할 것입니다 :

JSBin을

function HelloWorldViewModel() { 
    var self = this; 
    self.isInEditMode = ko.observable(true); 
    self.firstName = ko.observable('Bert'); 
    self.lastName = ko.observable('Berntington'); 
    self.fullName = ko.computed(function() { 
     return self.firstName() + ' ' + self.lastName(); 
    }); 
} 

보기 코드 :

<fieldset id="HelloWorldView"> 
    <legend>Hello World</legend> 
    <p><input type="checkbox" data-bind="checked: isInEditMode" /> edit mode</p> 
    <label>First name:</label> 
    <div data-bind="contenteditable: isInEditMode, text: firstName"></div> 
    <label>Last name:</label> 
    <div data-bind="contenteditable: isInEditMode, text: lastName"></div> 
    <label>Full name:</label> 
    <div data-bind="text: fullName"></div> 
</fieldset> 

이

내 지금까지, 핸들러 코드를 구속력 :

,616,

지금은 요소 및 CSS 클래스에 contenteditable 속성을 추가하는 것입니다.

편집 모드로 들어가거나 나가는 것이 좋습니다. 아직 누락 된 한 가지는 contentModel이 contenteditable 요소가 편집 된 후에 업데이트된다는 점입니다.

편집 가능한 요소와 뷰 모델을 동기화하는 가장 좋은 방법은 무엇입니까? 사용자 정의 "텍스트 :"바인딩이 필요한가, 아니면 더 쉬운 방법이 있습니까?

Answer 1

얼마 전 나는 KO 기반의 contenteditable binding plus 편집기를 만들었습니다.이 편집기는 아마도 영감을 얻을 수 있습니다. 이 도움이

https://github.com/madcapnmckay/Knockout-UI/blob/master/js/ui-editor.js

희망.