jquery.jsonengine.js _LOAD()

jquery.jsonengine.js _LOAD() - jsdo.it - share JavaScript, HTML5 and CSS

前のエントリで書いたヤツjquery.jsonengine.js _LOAD()を書いてみた。ネストしたjsonにはまだ未対応だけど。

ぜひjsdo.itでフォークしてhtmlやcssの定義のみでデータ表示出来る様子を疑似体験してください。

追記：こちらを参考にネストしたjsonにも対応しました。

jquery.jsonengine.js メモ

<div class="_je_message">
<span class="query">&sort=_createdAt.desc</span>
</div>

$._GET   (option, success, error);
$._POST  (option, success, error);
$._PUT   (option, success, error);
$._DELETE(option, success, error);

$('._je_messages')._LOAD();

$('._je_messages')._GET   ($('._je_messages_form'), success, error);
$('._je_messages')._POST  ($('._je_messages_form'), success, error);
$('._je_messages')._PUT   ($('._je_messages_form'), success, error);
$('._je_messages')._DELETE($('._je_messages_form'), success, error);

$('._je_messages')._GET   ($('._je_messages_search'), success, error);

$('._je_messages_listform');
$('._je_messages')._POST($('._je_messages_jsonform'), success, error);

多分この形に落ち着くと思う。

jsonengine用のアプリを簡単に書けるようなjQueryプラグイン書いた

アプリのJavaScriptはこんな感じで書けるようにしてみた。

$(function() {

$('#_POST').click(function(){
  $('#myDoc-list')._POST($('#myDoc'));
});

$('#_GET').click(function(){
  $('#myDoc-list')._GET($('#myDoc'));
});

$('#_PUT').click(function(){
  $('#myDoc-list')._PUT($('#myDoc'));
});

$('#_DELETE').click(function(){
  $('#myDoc-list')._DELETE($('#myDoc'));
});

$('#_SEARCH').click(function(){
  $('#myDoc-list')._GET($('#myDoc-search'));
});

$('#_SEARCH').click();

});

実際のデモはここ。 http://uchjava.appspot.com/samples/jquery/jquery.jsonengine.js/example.html

リストの項目をクリックしたら編集出来る。

blogspot.comにSyntaxHighlighterを導入する。

いろいろソースコードを掲載する予定なのでこんな風に表示したい。

var print = function(e){
  console.log(e);
}

手作業でハイライトを編集するのは面倒なのでSyntaxHighlighterを導入することにした。

jsonengineとExt.treeを使ったデモ

デモはこちら。http://uchjava.appspot.com/samples/extjs/samples/tree.html