SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

徹底解説JsRender/JsViews

JavaScript MVVMフレームワーク「JsViews」のJsObservableを使ったデータソースの変更と監視

徹底解説JsRender/JsViews 第6回

  • X ポスト
  • このエントリーをはてなブックマークに追加

複数のプロパティを同時に変更

 複数のプロパティを同時に変更できます。変更するプロパティのパスをキーとする連想配列を引数にsetPropertyメソッドを呼び出します。

 複数のプロパティを変更する際に、プロパティごとにsetPropertyメソッドを呼び出すと、そのたびにHTMLが更新されます。連想配列を使用して複数のプロパティを一度に変更すると、HTMLを更新する回数が減り、パフォーマンスが向上します。

[リスト2]複数のプロパティを同時に変更(JsViews2_sample2.html)
// データソースの定義
var item = {
  name: "みかん",
  price: 100,
  weight: 60,
  image: { url: "images/mikan.png", alt: "みかん画像" }
};

// setPropertyTestボタンが押された際に、setPropertyメソッドを使用してプロパティの値を変更する
$("#setPropertyTest").on("click", function(){
  $.observable(item).setProperty({
    name: "りんご",
    price: 200,
    weight: 60,
    "image.url": "images/apple.png",
    "image.alt": "りんご画像",
  });
});
図3:複数のプロパティを同時に変更
図3:複数のプロパティを同時に変更

配列の操作

 データソースが配列の場合も同様に、JsObservableのメソッドを使用して配列要素を変更します。

配列要素の挿入

 配列要素を挿入するには、insertメソッドを使用します。insertメソッドは、$.observable(データソースの配列).insert(挿入する配列要素)のように呼び出します。

 配列要素は最後尾に挿入されます。配列要素を挿入する位置を指定する場合には、insertメソッドの第1引数にインデックス(配列中の位置)を指定します。

[リスト3]配列要素の挿入(JsViews2_sample3.html)
<!-- テンプレートの定義 -->
<script id="itemTemplate" type="text/x-jsrender">
  <li>{^{>value}}</li>
</script>

<!-- データバインドを行うHTML要素 -->
<ul id="linkedContent"></ul><br/>

<!-- テキストボックスとボタン -->
<input id="text" type="text"/>
<button id="insert">先頭に挿入</button>
<button id="append">最後尾に追加</button><br/>

<script type="text/javascript">
  // データソースの定義
  var items = [];

  // テンプレートオブジェクトを作成し、HTML要素#placeholderとデータソースitemを関連付ける
  $.templates("#itemTemplate").link("#linkedContent", items);

  // insertメソッドを使用して配列の先頭に要素を挿入
  $("#insert").on("click", function(){
    $.observable(items).insert(0, {value: $("#text").val()});
    $("#text").val("");
  });

  // insertメソッドを使用して配列の最後尾に要素を追加
  $("#append").on("click", function(){
    $.observable(items).insert({value: $("#text").val()});
    $("#text").val("");
  });
</script>

 この例では、テキストを入力しボタンを押すと、入力したテキストがリストに追加されます。

図4:配列要素の挿入
図4:配列要素の挿入

次のページ
まとめ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
徹底解説JsRender/JsViews連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト やましぎ (ヤマシギ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7700 2014/04/10 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング