海外のForce.com Developerの方がおもしろそうな記事を投稿していました。『Get Started With KnockoutJS on the Salesforce1 Platform』というタイトルの記事です。
KnockoutJSをつかってSalesforce1アプリを開発しようという内容です。KnokoutJSの特徴についても簡単に触れられていて、「シングルページアプリケーションを開発するときに便利です。」という感じのことも記載されていました。
記事内の『Let's Get Started!』のところでGitHubへのリンクが貼られています。
KnockoutWorkshop/knockout.md at master · mattlacey/KnockoutWorkshop · GitHub
GitHubではSalesforceにログインするところから、ページやクラスを作成して実際に動かしてみるところまでの手順が紹介されていました。
最終的にはこんな感じの画面を作成できるみたいです。
ちょっと試してみたのですが途中でよくわからなくなってしまったため、実際に画面を表示するところは確認できていないのですが、内容をきちんと理解できればいろいろ参考になりそうな感じだと思います。
KnockoutJSのサイトへのリンクも貼られています。
ここから必要なファイルをダウンロードできるので、Salesforceで使いたいときは静的リソースにアップすれば利用できると思います。
KnockoutJSの使い方について知りたい場合は、ヘッダーメニューからいけるTutorialが便利です。
Tutorialのページは次のようになっています。
Tutorialページは4つの構成で分かれています。左上部分に表示された手順通りに右側部分のコードを修正すると左下部分のプレビュー画面で動作確認出来る仕組みです。英語表記ですが、修正後のコードが表示されるので特に悩むこと無く試せると思います。
最初のチュートリアルとなっている『Tutorial:Introduction』を一通り試してみました。このTutorialはStep1〜Step5まで用意されています。シンプルな内容なので短い時間で簡単に確認できると思います。
Step1
まずは左上部分の説明を下の方へスクロールしていくとサンプルコードが記載されています。
このコードをコピーして右上のViewのコード部分に貼り付けます。
コードを貼り付けた後は左下の部分にあるRunボタンをクリックしてください。outputされていた内容が更新されることを確認できると思います。
Run実行前
Run実行後
このようにHTMLのコードとJSコードを指示通りに変更していくことで、どのような処理が実行されるかを確認していくことができます。
Step1はこれで終了です。最後までスクロールするとContinueボタンが表示されているのでクリックしてStep2へ進めます。
Step2
Step2からHTML側とJS側の両方を変更していきます。
指示通りに進めればoutputTextだった箇所がinputTextに変更されるのを確認できると思います。
これでStep2も完了です。Continueボタンで次のStepへ進みます。
Step3
Step3も同様の手順で進めれば大丈夫です。
Step3ではLastNameとFirstNameの値を組み合わせてFullNameを表示する方法を確認できました。続いてStep4です。
Step4
Step4を進めると次のようにボタン表示が行えます。
ボタンのクリック処理も実行できます。このサンプルではLastNameが大文字に変更されるようになっていました。
Step5
Step5まで進むとGood Jobと完了メッセージが表示されます。
以上が『Tutorial:Introduction』の内容です。
Tutorialですが、他にも様々な内容が用意されているみたいです。そちらの方はまだ確認できていませんが今回のチュートリアルと同じように進められると思います。
このような感じでKnockoutJSについて学べるようになっていました。基本的な動作を確認できたら、実際にSalesforce1アプリ開発で利用できると思います。プレビューで表示されたテキストボックスを見る感じだと固有のCSSが適用されることもなさそうなので、Bootstrap SF1と組み合わせたりするとおもしろそうです。