カテゴリ:JQuery( 3 )
jquery.tmplの不具合
概要
jquery.tmpl.js はJavaScriptのテンプレートエンジンだ。
勝手はJQueryの公式サイトにものっていたが、現在はメンテナンスされておらず、公式からも削除された。
https://github.com/BorisMoore/jquery-tmpl

新規開発でjquery.tmplを使用してはいけない。
しかし、既存のシステムで使用されており、変更できない場合もあり、今回は、その場合に発生する不具合について説明する

不具合

大量のデータを扱った場合、Chromeでスタックオーバフローを起こす。
http://stackoverflow.com/questions/15908000/maximum-call-stack-size-exceeded-error-in-chrome-using-jquery-templates

大量データを扱った場合、メモリを食いつぶしブラウザがクラッシュする。
tmplではtmplで指定したデータを各要素のjQuery.dataに保持している。
この値は$('hoge').tmplItem()で取得できる。
この機能は通常なら有用だが、大量にデータを扱う場合にメモリーを食いつぶし、ブラウザがクラッシュすることになる。
このことはすでにtmplの問題として報告されている。

このバグはjquery.tmplの問題として報告されており、修正はされていない。
https://github.com/BorisMoore/jquery-tmpl/issues/80

修正後のファイル
以下のファイルは上記の不具合に対応したものである。
http://needtec.sakura.ne.jp/release/jquery.tmpl.js

以下のように使用すれば、データを保持しないようにしている。
$('#id').tmpl(datas,undefined,undefined,false).appendTo('#id2');

なお、フラグとかを付与せず、一括で保持しない場合は、build関数でstoreTmplItemsを呼ばないようにすれば、データは保持しない。



[PR]
by mima_ita | 2014-06-13 21:32 | JQuery
jQuery.msgBox()にコンボボックスを追加する
jQuery.msgBox()はメッセージボックスを表示するJQueryのライブラリである。
このライブラリを使用することで下記のようなメッセージボックスを作成できる。

b0232065_23542954.png


画像のようにテキストやチェックボックスを保持したメッセージボックスが簡単に作成できる。
ただ、このライブラリではコンボボックスを作成できないので改造した。


使用例:
b0232065_014736.png


$.msgBox({ type: "prompt",
title: "Log In",
inputs: [
{ header: "User Name", type: "text", name: "userName" },
{ header: "Password", type: "password", name: "password" },
{ header: "XXXX", type: "select", name: "seletcttest", value: "ゆっくりれいむ",items:["ゆっくりまりさ","ゆっくりれいむ","ゆっくりありす"] },
{ header: "Remember me", type: "checkbox", name: "rememberMe", value: "theValue" }],
buttons: [
{ value: "Login" }, {value:"Cancel"}],
success: function (result, values) {
var v = result + " has been clicked\n";
$(values).each(function (index, input) {
v += input.name + " : " + input.value +
(input.checked != null ? (" - checked: " + input.checked) : "") + "\n";
});
console.log(v);
}
});


サンプル
jquery.msgBoxEx.js
jquery.msgBox.rar (v1.0) をもとに改造したものである。
inputsパラメータに追加できる項目にselectを追加した。
[PR]
by mima_ita | 2013-10-18 00:02 | JQuery
Jeditableを使用したインライン編集
目的
JQueryのインラインエディタでページの内容を保存できるようにする。
これにはJeditable - Edit In Place Plugin For JQueryを用いて行なう。

説明
JeditableはMITライセンスで提供されているJQueryのプラグインである。
このドキュメントはhttp://www.appelsiini.net/projects/jeditableを参考にJeditableの使い方を記述する。

具体的な動作としては次のようになる。以下のようなページがあるとする。
b0232065_4311625.png


編集対象をクリックすることで編集モードに移行する。
b0232065_4312536.png


編集を完了することでページに反映が行なわれる
b0232065_4313627.png


More
[PR]
by mima_ita | 2013-03-21 04:42 | JQuery



実験ですお
検索
カテゴリ
最新の記事
.NET4.5におけるasy..
at 2014-07-02 00:46
.NETでTwitterを検..
at 2014-06-29 00:49
Redmineのプラグインで..
at 2014-06-28 03:29
IO.popenのwrite..
at 2014-06-28 03:25
RedmineのWikiでU..
at 2014-06-28 03:16
以前の記事
最新のトラックバック
その他のジャンル
ブログパーツ