정의되지 않은의 contentEditable 범위와 변경 사항을 저장 이상한 방법을 시도하는 뷰 모델 객체

Question

임에 접근하지만 약간의 문제가있을 때 : 이것은 내 스팬

:

<span data-bind="text: Content, event: { blur: viewModel.contentEdited}" contenteditable></span> 

을하고 뷰 모델입니다 같은 :

function note(id, date, content, category, color, background) { 
    this.ID = id; 
    this.Date = date; 
    this.Content = content; 
    this.Category = category; 
    this.Color = color; 
    this.Background = background; 
} 

: 템플릿은 메모에 구속력

var viewModel = { 
    notes: ko.observableArray([]), 
    newNoteContent: ko.observable(), 
    actualId: 0 
}; 

viewModel.contentEdited = function() { 
    alert(this.notes); 
} 

경고는 "정의되지 않음"입니다. 메신저가 viewModel의 다른 인스턴스를 만들고 거기에 노트가 비어 있기 때문입니까? 템플리트의 컨텍스트는 note이며 viewModel 외부에 있습니다.

감사합니다.

Answer 1

녹아웃의 경우 메서드를 호출 할 때 this의 값이 무엇인지주의해야합니다. 항목 (노트) 안에 있으면 this이 배열 항목이됩니다.

가장 쉬운 방법은 this의 값을 명시하는 것입니다. 녹아웃은 bind() 함수의 구현을 포함합니다.이 함수를 사용하면 함수에 대해 this의 값을 효과적으로 설정할 수 있습니다.

viewModel.contentEdited = function() { 
    alert(this.notes); 
}.bind(viewModel);