Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

先日の第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 ファイルの作成

jsライブラリの場所を指定するファイルを作成する。

ファイル名: 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 という名前で参照が可能になる。

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 デモで温度とコマンド結果一覧をテーブルで表示している箇所。

thermo.PNG

テーブルは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

tetha
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