Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

amber Smalltalk で knockout.js を使ってみた

先日の第78回Smalltalk勉強会デモプログラム でMVVMフレームワーク knockout.js を amber Smalltalk から利用したときの手順覚書です。

  • knockout.js ロード設定手順の概略

  • knockout.js を使った例

knockout.js ロード設定手順の概略

  1. knockout.js を stプロジェクトに bower で追加
  2. {ライブラリ名}.amd.json ファイルの作成
  3. grunt devel で config.js と the.js の更新
  4. Packege の impoorts 指定

1. knockout.js を stプロジェクトに bower で追加

amber Smalltalk のプロジェクトディレクトリでターミナルを使った作業。
knockout.js を bower で追加指定。

$ bower knockout —save

2. {ライブラリ名}.amd.json ファイルの作成


ファイル名: knockout.amd.json

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

3. grunt devel で config.js と the.js の更新

grunt を実行して config.js と the.js を更新する。

$ grunt devel


4. Packege の impoorts 指定

ここからは amber Smalltalk での作業。
Helios を使ってるならばパッケージの定義で、以下の ‘ko’ -> ‘knockout’ のように knockout.js の参照を定義する。これで ko という名前で参照が可能になる。

    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 は #{} で初期化されてることとする"

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


"LindaClientApp >> augmentPage"
ko applyBindings: viewModel.

データバインディングには、リストのoptions: と選択値は value: で指定する。

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


LindaThermoController デモで温度とコマンド結果一覧をテーブルで表示している箇所。



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


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

ただし、テーブル表示の要素はstオブジェクトではなくJSONもしくはHashedCollection である必要がある。

    "LindaThermoController >> dataOfWorkerList"
    ^self workerList collect: [:e | e data]
(self viewModel at: #workers) value: self dataOfWorkerList. 


Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
Help us understand the problem. What are the problem?