$.my Master-detail

gistfile1.js

({
	"params": {
		"delay": 30,
		"recalcDepth": 1
	},
	"require": [{
	    // You may need to insert you own data source since CORS limitations could apply
			"this.List": "http://s3-eu-west-1.amazonaws.com/ermouth/rockstar-deaths.json"
		}],
	"data": {
		"list": []
	},
	"Detail": [],
	"ui": {
		"#master": {
			"bind": "list",
			"list": ">div",
			"init": function ($list, form){
				var that = this;
				$list.on("switch.my", function (event, item){
					$list.find(".active").removeClass("active");
					that.Detail[0]=item;
					return false;
				})
				.sortable();
			},
			"hash": function (d) {return d.idx+"|"+d.name+"|"+d.surname},
			"id": function(e){return e.id},
			"manifest": {
				"ui": {
					"#name": {
						"bind": function (d, v, $o){ 
							d.idx = $o.my("index")+1;
							if (null!=v) {
								$o.trigger("switch", d);
								$o.my().root.addClass("active");
							}
							return d.idx+". "+d.name+" "+d.surname;
						},
						"events": "click.my"
					}
				}
			},
			"watch": "#detail",
			"events": "sortchange.my sortupdate.my"
		},
		"#detail": {
			"bind": "this.Detail",
			"list": ">div",
			"watch": "#master",
			"id": function(e){return e.id},
			"manifest": {
				"init": [
				  { "label": "100px", "row": "500px", "rowCss": "my-row pb15" },
					"<h3 id=\"idx\"></h3>",
					["Name", "inp#name"],
					["Surname", "inp#surname"],
					["Band", "inp#band"]
				],
				"ui": {
					"#name": "name",
					"#surname": "surname",
					"#band": "band",
					"#idx": "idx"
				}
			}
		}
	},
	"HTML": "<table width=\"100%\">\n\t<tr>\n\t\t<td width=270 class=\"pr20 blue\">\n\t\t\t<div id=\"master\" style=\"height:500px;overflow:scroll;width:270px;\">\n\t\t\t\t<div class=\"fs90 bbs pt5 pb5 hoverlink w250\">\n\t\t\t\t\t<span id=\"name\" class=\"pseudolink\"></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</td>\n\t\t<td class=\"oh\" id=\"detail\">\n\t\t\t<div class=\"fs90 bbs pt5 pb5 hoverlink\">\n\t\t\t\t\t<span><input type = \"text\" id=\"title\" class=\"w200\"></span>\n\t\t\t\t</div>\n\t\t</td>\n\t</tr>\n</table>",
	"init": function ($form, form) {
	 	$form.html(this.HTML);
  		form.data.list=this.List.slice(0).map(function(e, i){
			e.id = Number.random(1e12)+"";
			e.idx = i+1;
			return e;
		});
	},
	"style": {
		" .active": "font-weight:bold; background-color:#def; padding-left:10px; border-bottom:1px solid transparent;",
		" .active:after": "content: \" \"; width: 26px; height: 26px; background-color: #def; display: block; position: absolute; right: -13px; top: 5px; transform: rotate(45deg);"
	}
})