요 전날 제78회 스몰토크 공부회 의 데모 프로그램에서 MVVM 프레임 워크 knockout.js를 amber Smalltalk에서 사용했을 때의 절차 각서입니다.
자신용 망비록과 본편 자료의 팔로우도 일어나 달리기.

knockout.js로드 설정 절차 개요

knockout.js를 사용한 예

knockout.js 로드 설정 절차 개요

knockout.js를 st 프로젝트에 bower로 추가

{라이브러리 이름} .amd.json 파일 만들기

grunt devel에서 config.js 및 the.js 업데이트

Packege impoorts 명세

1. knockout.js를 st 프로젝트에 bower로 추가

amber Smalltalk 프로젝트 디렉토리에서 터미널을 사용한 작업.
knockout.js를 bower로 추가 지정.

$ bower knockout —save

2. {라이브러리 이름}.amd.json 파일 만들기

js 라이브러리의 위치를 ​​지정하는 파일을 작성합니다.

파일 이름: knockout.amd.json

{
    "paths": {
          "knockout" : "dist/knockout"
    }
}

3. grunt devel에서 config.js 및 the.js 업데이트

grunt를 실행하여 config.js 및 the.js를 업데이트합니다.

$ grunt devel

여기까지는 터미널에서 작업.

4. Package imports 지정

여기부터는 amber Smalltalk에서의 작업.
Helios를 사용한다면 패키지 정의에서 다음 'ko'-> 'knockout'과 같이 knockout.js 참조를 정의합니다. 이제 ko라는 이름으로 참조가 가능합니다.

Package
    named: 'LindaClientDemo'
    imports: {'ko' -> 'knockout'. 'amber/jquery/Wrappers-JQuery'. 'amber/web/Web'. 'silk/Silk'}
    transport: (AmdPackageTransport namespace: 'amber-lindaclient')

knockout.js를 사용한 예

knockout.js의 사용법에 대해 체계적으로 설명해야 합니다만, 우선 요전날의 제78회 Smalltalk 공부회의 데모 프로그램 의 코드의 해설로 캄벤해 주세요.
(knockout.js의 모든 기능을 다시 시도)

SELECT 태그의 목록 및 선택 사항

객체 목록 및 TABLE 태그 표시

SELECT 태그의 목록 및 선택 정보

HTML 측에 data-bind : 속성으로 바인드 할 대상을 지정합니다.
그 대상명을 키로서 observale인 값을 가지는 오브젝트 혹은 JSON을 applyBindings 한다.

"LindaClientApp >> setupViewModel"
"模式的なViewModelの例"
"インスタンス変数 viewModel は #{} で初期化されてることとする"

self viewModel addAll: #{
        #availableServers -> (ko observableArray: LindaClient serverUrls) .
        #serverUrl -> (ko observable: LindaClient defaultServerUrl) 
    }.

이 ViewModel을 knockout에 등록한다.

"LindaClientApp >> augmentPage"
ko applyBindings: viewModel.

데이터 바인딩에는, 리스트의 options: 와 선택치는 value: 로 지정한다.

<div>
    <p>lindaサーバーURL: 
    <select data-bind="options: availableServers,
                       value: serverUrl,
                       optionsCaption: '-選択してください-'"></select></p>
</div>

객체 목록 및 테이블 표시

LindaThermoController 데모에서 온도와 명령 결과 목록을 테이블에 표시하는 부분.



테이블은 ThermoTuple 목록에 각 ThermoTuple의 센서 이름과 온도와 시간을 표시합니다.

"LindaThermoController >> setupViewModel"
     viewModel addAll: #{
        #workers -> (ko observableArray: #())
    }.

데이터 바인딩

  <table>
    <thead>
      <tr>
        <th>sensor</th><th>celsius</th><th>time</th>
      </tr>
    </thead>
    <tbody data-bind="foreach: workers">
      <tr>
    <td data-bind="text: sensor"></td>
    <td data-bind="text: celsius"></td>
    <td data-bind="text: time"></td>
      </tr>
    </tbody>
  </table>

다만, 테이블 표시의 요소는 st 오브젝트가 아니고 JSON 혹은 HashedCollection 일 필요가 있다.

dataOfWorkerList
    "LindaThermoController >> dataOfWorkerList"
    "TupleオブジェクトからJSONのdataのリストを作る"
    ^self workerList collect: [:e | e data]

(self viewModel at: #workers) value: self dataOfWorkerList. 

참고 URL

제78회 Smalltalk 공부회의 데모 프로그램

Knockout 한국어 문서