JsViewsチュートリアル - フォーム要素とデータリンク(チェックボックス＋コンバータ)
JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsViews入門 - Do You PHP はてなも参照してください。
今回やること
JsViewsでチェックボックスをデータリンクさせ、コンバータで変数に格納する値を変更する
コード
<html> <body> <!-- レンダリング結果を表示するスペース --> <div id="result"></div> <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://www.jsviews.com/download/jsviews.min.js" type="text/javascript"></script> <script type="text/javascript"> // フォーム要素とデータリンク $(function() { $.views.converters({ preCheckbox: function (value) { return value == '1' ? true : false; }, postCheckbox: function (value) { return value == true ? '1' : '0'; } }); // 表示するデータ var message = { check_as_value: '0' }; // テンプレートに名前(ここでは"linkTemplate")をつけて登録する $.templates({ linkTemplate: "#template" }); // テンプレート"linkTemplate"と変数messageをリンク $.link.linkTemplate('#result', message); }); </script> <!-- テンプレート --> <script id="template" type="text/x-jsrender"> <p>check=<span data-link="check"></span></p> <div> <label for="check_as_value"><input id="check_as_value" type="checkbox" data-link="{preCheckbox:check_as_value:postCheckbox}"/>チェックボックス</label> </div> </script> </body> </html>
説明
1つ前のエントリではチェックボックスとデータリンクさせた場合、値がbool型(true・false)になることを見てきましたが、"0"と"1"で表したほうが良い場合が多々あると思います。この場合、コンバータを使うことで解決できます。
これまでは、表示形式を変更するためにコンバータを使ってきましたが、リンクした値を変更する場合にも使えます。また、
- リンクした変数から値を取得する
- リンクした変数に値を格納する
という2つのタイミングでコンバータを使用できます。イメージ的には次のようなフローになります。
変数 → [値を取得] → input要素 → [値を格納] → 変数
2つコンバータを使用する場合のテンプレート側の書き方は以下のようになります。
{[コンバータ(前)]:[変数]:[コンバータ(後)]}先ほどのフローを書き換えると次のようになります。
変数 → [コンバータ(前)] → input要素 → [コンバータ(後)] → 変数
たとえば、今回のチェックボックスの場合、input要素ではtrue・falseでチェックボックスのオン・オフを切り替えますが、最終的な値は1か0としたいので、
- コンバータ(前)では、1・0をそれぞれtrue・falseに変換する
- コンバータ(後)では、true・falseをそれぞれ1・0に変換する
とすれば良い、ということになります。
変数 → [1・0をtrue・falseに変換] → input要素 → [true・falseを1・0に変換] → 変数
コンバータの書式はJsRenderチュートリアル - 独自のコンバータを作る - Do You PHP はてなと同じです。以下のpreCheckbox、postCheckboxというコンバータが、それぞれコンバータ(前)、コンバータ(後)に相当します。
$.views.converters({ preCheckbox: function (value) { return value == '1' ? true : false; }, postCheckbox: function (value) { return value == true ? '1' : '0'; } });
また、テンプレート側は次のように変数check_as_valueがpreCheckboxとpostCheckboxに挟まれた形になります。
<input id="check_as_value" type="checkbox" data-link="{preCheckbox:check_as_value:postCheckbox}"/>
JSFiddleで動作を見る
JsViewsチュートリアル - フォーム要素とデータリンク(チェックボックス)
JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsViews入門 - Do You PHP はてなも参照してください。
今回やること
JsViewsでチェックボックスをデータリンクさせる
コード
<html> <body> <!-- レンダリング結果を表示するスペース --> <div id="result"></div> <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://www.jsviews.com/download/jsviews.min.js" type="text/javascript"></script> <script type="text/javascript"> // フォーム要素とデータリンク $(function() { // 表示するデータ var message = { check: false }; // テンプレートに名前(ここでは"linkTemplate")をつけて登録する $.templates({ linkTemplate: "#template" }); // テンプレート"linkTemplate"と変数messageをリンク $.link.linkTemplate('#result', message); }); </script> <!-- テンプレート --> <script id="template" type="text/x-jsrender"> <p>check=<span data-link="check"></span></p> <div> <label for="check"><input id="check" type="checkbox" data-link="check"/>チェックボックス</label> </div> </script> </body> </html>
説明
フォーム要素と変数の値をデータリンクさせたい場合、基本的には、JsViewsチュートリアル - まずはHello World - Do You PHP はてなで出てきたdata-link属性を使ってリンクしたい変数を指定します。今回はチェックボックス(input要素のtype属性が"checkbox")の例です。
基本的にはselect要素やラジオボタンと同様、チェックボックスにdata-link属性を付けてリンクさせる変数を指定します。
<input id="check" type="checkbox" data-link="check"/>
ブラウザ上から選択された項目が変更されたタイミングで変数の値が変化します。ただし、値がvalue属性の値ではなくbool型(true/false)になることに注意してください。
JSFiddleで動作を見る
JsViewsチュートリアル - フォーム要素とデータリンク(ラジオボタン)
JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsViews入門 - Do You PHP はてなも参照してください。
今回やること
JsViewsでラジオボタンをデータリンクさせる
コード
<html> <body> <!-- レンダリング結果を表示するスペース --> <div id="result"></div> <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://www.jsviews.com/download/jsviews.min.js" type="text/javascript"></script> <script type="text/javascript"> // フォーム要素とデータリンク $(function() { // 表示するデータ var message = { radio: '1' }; // テンプレートに名前(ここでは"linkTemplate")をつけて登録する $.templates({ linkTemplate: "#template" }); // テンプレート"linkTemplate"と変数messageをリンク $.link.linkTemplate('#result', message); }); </script> <!-- テンプレート --> <script id="template" type="text/x-jsrender"> <p>radio=<span data-link="radio"></span></p> <div> <label for="radio1"><input id="radio1" type="radio" name="radio" value="1" data-link="radio"/>ラジオ1</label> <label for="radio2"><input id="radio2" type="radio" name="radio" value="2" data-link="radio"/>ラジオ2</label> <label for="radio3"><input id="radio3" type="radio" name="radio" value="3" data-link="radio"/>ラジオ3</label> </div> </script> </body> </html>
説明
フォーム要素と変数の値をデータリンクさせたい場合、基本的には、JsViewsチュートリアル - まずはHello World - Do You PHP はてなで出てきたdata-link属性を使ってリンクしたい変数を指定します。今回はラジオボタン(input要素のtype属性が"radio")の例です。
基本的にはselect要素と同様、ラジオボタンにdata-link属性を付けてリンクさせる変数を指定します。通常、複数のラジオボタンを用意すると思いますが、そのいずれにもdata-link属性と同じ変数を指定します。
<input type="radio" name="radio" value="1" data-link="radio"/> <input type="radio" name="radio" value="2" data-link="radio"/> <input type="radio" name="radio" value="3" data-link="radio"/>
ブラウザ上から選択された項目が変更されたタイミングで変数の値が変化し、値はvalue属性の値になります。
JSFiddleで動作を見る
JsViewsチュートリアル - フォーム要素とデータリンク(select要素)
JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsViews入門 - Do You PHP はてなも参照してください。
今回やること
JsViewsでselect要素をデータリンクさせる
コード
<html> <body> <!-- レンダリング結果を表示するスペース --> <div id="result"></div> <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://www.jsviews.com/download/jsviews.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { // 表示するデータ var message = { select: '2', multiple: [1, 3] }; // テンプレートに名前(ここでは"linkTemplate")をつけて登録する $.templates({ linkTemplate: "#template" }); // テンプレート"linkTemplate"と変数messageをリンク $.link.linkTemplate('#result', message); }); </script> <!-- テンプレート --> <script id="template" type="text/x-jsrender"> <p>select=<span data-link="select"></span></p> <p>multiple=<span data-link="multiple"></span></p> <div> <select id="select" data-link="select"> <option value="1">セレクト1</option> <option value="2">セレクト2</option> <option value="3">セレクト3</option> </select> </div> <div> <select id="multiple" multiple data-link="multiple"> <option value="1">マルチプル1</option> <option value="2">マルチプル2</option> <option value="3">マルチプル3</option> </select> </div> </script> </body> </html>
説明
フォーム要素と変数の値をデータリンクさせたい場合、基本的には、JsViewsチュートリアル - まずはHello World - Do You PHP はてなで出てきたdata-link属性を使ってリンクしたい変数を指定します。今回はselect要素(プルダウン)の例で、単一選択と複数選択の2種類の動作が確認できるサンプルです。
select要素にdata-link属性を付け、リンクさせる変数を指定します。
<select id="select" data-link="select"> ： </select>
ブラウザ上から選択された項目が変更されたタイミングで変数の値が変化し、値はoption要素のvalue属性の値(文字列)になります。また、multiple属性を付けた場合も同様ですが、変数の値は文字列の配列、非選択時はnullになります。
JSFiddleで動作を見る
PECL::ssh2を使ってみる
このエントリは、Do You PHP?(www.doyouphp.jp)で公開していたコンテンツを移行/加筆/修正したものです。公開の経緯はこちらをどうぞ。目次はこちらです。
初出：2006/01/28
PHPを使ってバッチスクリプトなどを作る際、ファイル転送といえば今まではftp経由が主流(？)かと思いますが、昨今のセキュリティに対する意識向上から何らかの暗号化を施したい場合があります。2005年の初めにPECLにssh2拡張モジュールが登録されマニュアルもそれなりにこなれてきましたので、今更ながら試してみました。
今回のゴールは、PHPから公開鍵認証を行い、リモートコマンドの実行とファイル転送を行う、というものです。
インストール
まずはインストールした環境ですが、OSはCentOS6.4、PHPは以下のようなconfigureオプションを付けたPHP5.6.6です。
./configure \ --with-apxs2=/usr/local/apache2/bin/apxs \ --prefix=/usr/local/lib/php56 \ --with-pgsql=shared,/usr/local/pgsql \ --with-gd \ --with-jpeg-dir \ --with-png-dir \ --with-xpm-dir \ --with-freetype-dir \ --enable-gd-native-ttf \ --enable-gd-jis-conv \ --enable-dom \ --with-zlib-dir \ --enable-mbstring \ --enable-pdo=shared \ --with-pdo-pgsql=shared,/usr/local/pgsql \ --with-openssl \ --with-pear=/usr/local/lib/php56/pear \ --with-pdo-sqlite=shared \ --with-curl=shared \ --with-mcrypt=shared \ --enable-intl \ --enable-opcache \ --enable-zip=shared \ --disable-ipv6 \ --with-iodbc=shared \ --with-pdo-odbc=shared,iODBC \ --enable-pcntl=shared \ --enable-soap=shared \ --with-readline
「--prefix」オプションを付けているため、phpコマンドのパスがデフォルトとは変わっていますが適宜読み替えてください。
さて、ssh2拡張モジュールのインストールですが、PHPマニュアルにもあるとおり先にopensslとlibssh2をインストールしておく必要があります。なお、最近のLinuxディストリビューションであれば、openssl-develパッケージなど用意されていると思いますので、aptなりup2dateなりyumなりでインストールした方が簡単です。今回の環境ではyumコマンドで各パッケージをインストールしました。
$ sudo yum install -y openssl openssl-devel libssh2 libssh2-devel
$
続いて、peclコマンドでssh2拡張モジュールをインストールします。
$ sudo /usr/local/lib/php56/bin/pecl install -a ssh2-beta $
インストールが終わったら、ssh2拡張モジュールをロードするようphp.iniに追記します。
：
extension=ssh2.so
：最後にモジュールが正しくロードされている事を確認します。Apache＋PHPで利用する場合はApacheを再起動します。
$ /usr/local/lib/php56/bin/php -m | grep ssh2 ssh2 $
パスワード認証の例
まず、パスワード認証の場合、ssh2_auth_password関数を使用します。
<?php $connection = ssh2_connect('targethost', 22); if (!ssh2_auth_password($connection, 'username', 'password')) { die('認証失敗'); } echo "認証成功" . PHP_EOL;
公開鍵認証の例
公開鍵認証の場合、事前にRSA秘密鍵・公開鍵のペアを作成しておく必要が(当然)あります。また、Apacheと組み合わせる場合はUserディレクティブで指定したユーザー、バッチの場合はバッチを実行するユーザーでの読み込み権限が必要です。今回は、/home/httpd/.sshディレクトリを作成し、所有者をApacheのUserディレクティブでしていたnobodyユーザーにしました。使用する関数は、ssh2_auth_pubkey_fileです。
以下ざっとした手順です。targethostの/etc/ssh/sshd_configの編集が必要になる場合もありますので、適宜Googleで検索してみてください。
$ ssh-keygen -t rsa -b 2048 Generating public/private rsa key pair. Enter file in which to save the key (/home/somebody/.ssh/id_rsa): Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has been saved in /home/somebody/.ssh/id_rsa. Your public key has been saved in /home/somebody/.ssh/id_rsa.pub. The key fingerprint is: XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX somebody@client $ $ sudo mkdir -p /home/httpd/.ssh $ sudo cp -p ~somebody/.ssh/id_rsa* /home/httpd/.ssh/ $ sudo chown -R nobody /home/httpd/ $ sudo chmod go-rwx /home/httpd/.ssh/ $
公開鍵を接続先サーバにコピーしauthorized_keys2を作成しておきます。
$ scp /home/somebody/.ssh/id_rsa.pub targethost:./ somebody@targethost's password: $ ssh targethost somebody@targethost's password: $ mkdir .ssh $ chmod 700 .ssh/ $ mv id_rsa.pub .ssh/authorized_keys2 $
さて、PHPコードのほうですが、次のような感じになります。
<?php $connection = ssh2_connect('targethost', 22, array('hostkey'=>'ssh-rsa')); /** * 公開鍵・秘密鍵の読込権限に注意 */ if (!ssh2_auth_pubkey_file($connection, 'somebody', '/home/httpd/.ssh/id_rsa.pub', '/home/httpd/.ssh/id_rsa', 'passphrase')) { die('認証失敗'); } echo "認証成功" . PHP_EOL;
リモートコマンドの実行例
コマンド実行はssh2_exec関数で行いますが、結果出力を取得する場合はssh2_exec関数から返されるストリームのブロックモードを有効にしておく必要があります。
<?php : /** * dfコマンドの実行結果を取得する */ $stream = ssh2_exec($connection, 'df -h '); /** * ストリームのブロックモードを有効にし、ストリームからデータを読み出せる * 状態になるまで待つ */ stream_set_blocking($stream, true); var_dump(fread($stream, 4096));
ちなみに、ここで返されるストリームはstdoutになります。このため、エラーメッセージなどを取得する場合は、コマンドの後に「2>&1」を付けてstderrと共にstdoutに出力をするか、以下のように一度stderrサブストリームを取得して、結果を取得するようになります。
<?php : /** * 存在しないコマンドの実行結果を取得する */ $stdout_stream = ssh2_exec($connection, 'non-exist-command '); /** * stderrサブストリームを取得する。ブロックモードへの変更も忘れずに！ */ $stderr_stream = ssh2_fetch_stream($stdout_stream, SSH2_STREAM_STDERR); stream_set_blocking($stdout_stream, true); var_dump(fread($stdout_stream, 4096)); var_dump(fread($stderr_stream, 4096));
ファイルの転送例
これはPHPマニュアルどおり、コマンド一発で行えます。
<?php : if (ssh2_scp_send($connection, '/home/httpd/test.log', '/home/shimooka/test.log', 0644)) { echo '転送成功'; } else { echo '転送失敗'; }
JsViewsチュートリアル - データリンクされたオブジェクトを操作する
JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsViews入門 - Do You PHP はてなも参照してください。
今回やること
JsViewsでデータリンクされたオブジェクトに対して更新・削除などの操作をする
コード
<html> <body> <!-- レンダリング結果を表示するスペース --> <div id="result"></div> <a href="#" id="add">add</a> <a href="#" id="modify">modify</a> <a href="#" id="reset">reset</a> <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://www.jsviews.com/download/jsviews.min.js" type="text/javascript"></script> <script type="text/javascript"> // オブジェクトの操作 $(function() { // 表示するデータ(オブジェクト) var fruits = { name: "りんご", num: 3 }; // テンプレートに名前をつけて登録する // linkPropsTemplateはデータリンクしたpropsタグを使ったテンプレート $.templates({ linkTemplate: "#template" }); // テンプレート"linkTemplate"と変数fruitsをリンク $.link.linkTemplate('#result', fruits); $(document) /** * "add"をクリックすると、オブジェクトに新しいプロパティを * 追加して再レンダリング */ .on('click', '#add', function(ev) { $.observable(fruits).setProperty('color', 'green'); ev.preventDefault(); }) /** * "modify"をクリックすると、既存のプロパティを更新して * 再レンダリング */ .on('click', '#modify', function(ev) { if (fruits.name) { $.observable(fruits).setProperty('name', 'ドリアン'); } ev.preventDefault(); }) /** * "remove"をクリックすると、プロパティを削除して * 再レンダリング */ .on('click', '.remove', function(ev) { // removePropertyはドキュメント化されていないメソッド $.observable(fruits).removeProperty( // clickイベントが発生したViewオブジェクトを取得し、 // そのデータのキーを取得する $.view(this).data.key ); ev.preventDefault(); }) /** * "reset"をクリックすると、既存のプロパティを更新して * 再レンダリング */ .on('click', '#reset', function(ev) { if (fruits.color) { $.observable(fruits).removeProperty('color'); } $.observable(fruits).setProperty({ name: "りんご", num: 3 }); ev.preventDefault(); }); }); </script> <!-- テンプレート --> <script id="template" type="text/x-jsrender"> {^{props #data}} <p>{^{>key}}の値は{^{:prop}}です <a href="#" class="remove">×</a></p> {{/props}} </script> </body> </html>
説明
前回は配列の操作でしたので、今回はリンクされたオブジェクトの操作の説明です。
JsViews(実際にはJsObservableという別ライブラリ)では、リンクされたオブジェクトについては、更新と削除の2つのメソッドが用意されています。
更新
オブジェクトのプロパティを1つまたは複数同時に更新します。複数更新する場合は、オブジェクトとして渡します。
$.observable([データリンクしたオブジェクト]).setProperty([プロパティ名], [プロパティの値]) $.observable([データリンクしたオブジェクト]).setProperty({ [プロパティ名1]: [プロパティの値1], [プロパティ名2]: [プロパティの値2], ： })
コード例では、"add"というリンクをクリックした時に、変数fruitsに"color"というプロパティを追加しています。
$.observable(fruits).setProperty('color', 'green');
また、"modify"というリンクをクリックした時には、nameプロパティの値を"ドリアン"に変更しています。
$.observable(fruits).setProperty('name', 'ドリアン');
もう一つ。"reset"というリンクをクリックした時には、name, numの各プロパティの値を同時に変更しています。
$.observable(fruits).setProperty({ name: "りんご", num: 3 });
削除
公式サイトにドキュメント化されていませんが、プロパティを削除するメソッドも用意されています。
$.observable([データリンクしたオブジェクト]).removeProperty([プロパティ名])
コード例では、"×"というリンクをクリックした際に、当該プロパティを変数fruitsから削除しています。
$.observable(fruits).removeProperty(
$.view(this).data.key
);
なお、該当するプロパティ名は、クリックされた要素を含むViewオブジェクトを取得し、そのデータから取得しています。
JSFiddleで動作を見る
JsViewsチュートリアル - データリンクされた配列データを操作する
JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsViews入門 - Do You PHP はてなも参照してください。
今回やること
JsViewsでデータリンクされた配列データに対して追加・削除などの操作をする
コード
<html> <body> <!-- レンダリング結果を表示するスペース --> <div id="result_link"></div> <hr/> <div id="result_link_for"></div> <a href="#" id="add">add</a> <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://www.jsviews.com/download/jsviews.min.js" type="text/javascript"></script> <script type="text/javascript"> // 配列の操作 $(function() { // データの配列(もしくはオブジェクト) var fruits = [ { name: "りんご", num: 3 }, { name: "いちご", num: 5 }, { name: "バナナ", num: 2 }, ]; // テンプレートに名前をつけて登録する // linkForTemplateはデータリンクしたforタグを使ったテンプレート $.templates({ linkTemplate: "#template", linkForTemplate: "#template_for" }); // テンプレート"linkTemplate"と変数fruitsをリンク $.link.linkTemplate('#result_link', fruits); $.link.linkForTemplate('#result_link_for', {fruits: fruits}); $(document) /** * "add"をクリックすると、配列データに新しいデータを * 追加して再レンダリング */ .on('click', '#add', function(ev) { // リンクされた配列データへの追加は$.observable().insert() $.observable(fruits).insert( { name: "ドリアン", num: fruits.length } ); ev.preventDefault(); }) /** * "×"をクリックすると、配列データから当該データを * 削除して再レンダリング */ .on('click', '.remove', function(ev) { // リンクされた配列データから削除は$.observable().remove() $.observable(fruits).remove( // clickイベントが発生したViewオブジェクトを取得し、 // そのindexを取得する $.view(this).index ); ev.preventDefault(); }); }); </script> <!-- テンプレート --> <script id="template" type="text/x-jsrender"> <p>{^{>#index}}:{{:name}}が{{:num}}個あります <a href="#" class="remove">×</a></p> </script> <script id="template_for" type="text/x-jsrender"> {^{for fruits}} <p>{^{>#index}}:{{:name}}が{{:num}}個あります <a href="#" class="remove">×</a></p> {{/for}} </script> </body> </html>
説明
前回までのチュートリアルでは、テキストボックスに値を入力することでデータリンクした値を更新していましたが、当然JavaScriptコード内からデータを更新したい場合もあります。
例えば配列データの場合、
fruits.push({ name: "ドリアン", num: 4 });
などとやっても、JsViewsにはデータが更新されたかどうか判断できません。逆に、リンクの情報を壊してしまう結果になります。JsViewsでは、配列やオブジェクトを更新するための仕組みが提供されています(実際にはJsObservableという別ライブラリ)ので、これを使うことになります。配列データの更新については、追加・削除・移動・全更新の4つが用意されています。
追加
配列データの任意の場所、もしくは最後にデータを追加します。
$.observable([データリンクした配列データ]).insert([追加するデータの位置], [追加するデータ])
追加するデータの位置は配列の添字(0始まり)です。省略可能でその場合は最後に追加されます。
コード例では、"add"というリンクをクリックした際に、変数fruitsの最後にオブジェクトを追加しています。
$.observable(fruits).insert({ name: "ドリアン", num: fruits.length });
削除
配列データの任意の場所のデータを削除します。
$.observable([データリンクした配列データ]).remove([削除するデータの位置], [削除するデータの数])
削除するデータの位置は配列の添字(0始まり)で、削除した位置より後ろのデータは前に詰められます。削除するデータ数は省略した場合は1となります。
コード例では、"×"というリンクをクリックした際に、当該データを変数fruitsから削除しています。
$.observable(fruits).remove($.view(this).index);
移動
配列データの任意の場所のデータを任意の場所に移動します。
$.observable([データリンクした配列データ]).move([移動するデータの位置], [移動先の位置], [移動するデータの数])
移動するデータの位置と移動先の位置は配列の添字(0始まり)です。移動するデータの数を省略した場合は1となります。
全更新
配列データをすべて入れ替えます。
$.observable([データリンクした配列データ]).refresh([新しい配列データ])
