DictAndListPlugin

It is a plugin for editable Dict and List html, their values can be attached into form as stringified JSON when processing jQuery post.

View Demo in: http://dict-and-list.appspot.com/

It is written in backbonejs, so when you use list_dict.js, list_dict_recursive.js, jquery.js, backbone.js, underscore.js are necessary.

There are two files in this plugin, list_dict.js and list_dict_recursive.js.

1. Using list_dict.js, you can define list and dict without clarifying the type of the elements in them, it simply considers all the value as string.
2. Using list_dict_recursive.js. you can define list and dict recursively and also with clarification of the type of elements in them.

1. Element in list can be of the type:  	* boolean 	* int  	* float 	* string 	* enum (with type as well) 	* dict 2. Key in item of dict can be of the type:  	* boolean 	* int 	* float 	* string 	* enum 	but since it is the key in dict, it will be always converted into string. 3. Value in item of dict can be of the type:  	* boolean 	* int 	* float 	* string 	* enum 	* list 

list_dict.js

###List###

####Example####

<form id="create_taste_form" action="/create_taste" method="POST">   <input type="text" name="user"/>   <div class="list" name="movies"></div> </form> 

<div class="list" name="movies"></div> is able to add value as an element to a list named movies.

When posting the form by jQuery, such as

$("#create_taste_form").submit(function(event) {   event.preventDefault(); 	var form = $(event.currentTarget); 	var url = form.attr("action"); 	$.post(url, form.serializeArray(), function(data) { 	          ... 	}); }); 

form.serializeArray() or form.serializa() will look like

      {          user: "username",         movies: ["movie_1_name", "movie_2_name", ...]       } 

If you want to have an editable list with initial list, you can define as

<div class="list" name="movie" data="['movie_1_name', 'movie_2_name', ..]"></div> 

If you want to constrain the element value in the list, you can define as

<div class="list" options="A,B,C,D"></div> 

Then it is a select field, you only can select the value from the drop-down.

###Dict###

####Example####

<form id="rank_movies_form" action="/rank_movies" method="POST">   <input type="text" name="user"/>   <div class="dict" name="rankings"></div> </form> 

<div class="dict" name="rankings"></div> is able to add key value pair to a dict named rankings.

When posting the form by jQuery, such as

$("#rank_movies_form").submit(function(event) {   event.preventDefault();   var form = $(event.currentTarget); 	var url = form.attr("action"); 	$.post(url, form.serializeArray(), function(data) { 	          ... 	}); }); 

form.serializeArray() or form.serializa() will look like

      {          user: "username",         rankings: {           "movie_1_name": 4.0,            "movie_2_name": 3.5,                 ...     : ...         }       } 

If you want to have an editable dict with initial dict, you can define as

<div class="dict" name="ranking" data="{'movie_1_name': 4.0, 'movie_2_name': 3.5, ...}"></div> 

If you want to constrain the key or value in the dict, you can define as

<div class="dict" k_options="m1,m2,m3,m4" v_options="1.0,1.5,2.0,2.5,3.0,3.5,4.0,4.5,5.0"></div> 

When k_options, v_options is defined, the k field or v field is select, you only can select values from these constrains.

list_dict_recursive.js

There are two advantages of list_dict_recursive.js

1. Clarify the type of elements in list or dict
2. Define list and dict recursively

You can find complete examples in list_dict_recursive.html. Here, we emphasis on the feature 2: Recursion.

<div class="list" element_class="dict" name="lang_explain"      data="[      	{	'features':[{'meaning':'m1','pos':'verb'}],      		'examples':[{'ex':'ex1', 'ex_tr':'ex1 translation'},{'ex':'ex2', 'ex_tr':'ex2 translation'}]      	},       	{	'features':['menaing':'m2','pos':'noun'}],      		'examples':[{'ex':'ex1', 'ex_tr':'ex1 translation'}]      	}]"      >      <div class="dict_info" k_class="string" v_class="list" v_element_class="dict"></div> </div> 

This piece of code illustrates several points here:

1. A list is called lang_explain;
2. Each element of this list stores a dict, which is coded as element_class="dict";
3. Each dict takes a string as its key and a list as its value, which is coded as k_class="string" v_class="list";
4. The value stores a list of dict, which is coded as v_element_class="dict";
5. data stores the existing data in this plugin, practically, it stores the data fecth from database.

If you have problems to understand this, in the test suit, there is a full package of example you can play with. PS: By using console in browser, you can see the post data.