Knockout.js 구문

Question

내가 자바 스크립트 MVC 프레임 워크 초보자는 기존의 자바 스크립트 (일부 jQuery를 경험)에서 오는

Knockout.js 오전, 내가 구문을 이해하는데 어려움을 겪고 Knockout.js 학습

아래의 내용을 고려하십시오.

보기 :

<ul class="folders" data-bind="foreach: folders"> 
<li data-bind="text: $data, 
       css: { selected: $data == $root.chosenFolderId() }, 
       click: $root.goToFolder"></li></ul> 

보기 모델 :

function WebmailViewModel() { 
    // Data 
    var self = this; 
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam']; 
    self.chosenFolderId = ko.observable(); 

    // Behaviours  
    self.goToFolder = function(folder) { self.chosenFolderId(folder); };  
}; 

당신이 날 문이하는 일 (구체적으로 $ 데이터, $ 루트를) 설명해 주시겠습니까? self.chosenFolderId(folder);의 내용도 무엇입니까?

Answer 1

$ data 및 $ root 키워드는 일반적으로 KO에서 사용합니다. 배열 (데이터 바인딩)에서 foreach를 사용하면 KO는 배열의 각 요소에 대해 <li>을 만듭니다.

이 경우 $ data는 폴더의 현재 항목 (예 : folders [i])이고 $ root는 부모 요소입니다. 당신을 위해 이 폴더는 뷰 모델의 필드 : 반복에 $ 데이터 = 현재 폴더 (viewModel.folder [I]) $ 루트 = 뷰 모델

self.chosendFolderId (폴더)가 뷰 모델 chosenFolderId 방법을 실행합니다. 함수에서 "this"키워드는 viewModel이 아니고 메서드의 보낸 사람이기 때문에 코드는 viewModel 값을 유지하기 위해 self를 사용합니다. 종결이야.

편집 : $ parent 키워드는 트리의 선행 수준입니다. $ root 키워드는 최상위 트리의 수준입니다. 우리가 viewModel.topObjects.Objects에 foreach 문을 작성하는 경우

viewModel { 
    topObjects : ko.observableArray() 
} 

viewModel.topObjects.push({ 
    Objects : ko.observableArray() 
}); 

에서, $의 부모가 topObjects이다, $ 루트 뷰 모델이다.

감사 Tjorriemorrie ;-)

Answer 2

귀하의 질문에 응답은 약 self.chosenFolderId(folder)

이 관찰 chosenFolderId에 값을 기록합니다. 이 제공된 코드에 (같은 일이)는 다음 선택 CSS를하지 않는 에 자기에서 참조를 변경하려고하면 인수의 값은 "folder는"$data.

Answer 3

실제로 현재 값입니다 작업. 왜 아무도 알지 못해?

this.goToFolder = function(folder) { this.chosenFolderId(folder); };