Simple two way binding javascript, jQuery plugin
http://axisj.github.io/AXBinder/
- jQuery
- Mustache
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="plugins/jquery/jquery.min.js"></script>
<!-- this mustache is imporoved version you must use this version ! -->
<script src="plugins/mustache/mustache.js"></script>
<script src="src/AXBinder.js"></script>
<!-- or use min file -->
<!-- this file include mustache
<script src="dist/AXBinder.min.js"></script>
-->
</head>바인딩할 자바스크립트 오브젝트로 제이쿼리로 검색된 HTML dom 엘리먼트 에 바인딩합니다. 바인딩된 모델을 반환합니다.
<div id="form-target">
<input type="text" data-ax-path="name" class="AXInput"/>
<input type="text" data-ax-path="email" class="AXInput"/>
</div>var obj = {
name: "Thomas",
email: "[email protected]"
}
var myModel = new AXBinder();
myModel.set_model(obj, $("#form-target"));data_path에 값을 변경한다. value의 타입은 (String, Number, Array, Object)를 지원.
myModel.set("name", "Seowoo");data_path에 값을 반환한다. data_path 가 없으면 전체 Object를 반환한다.
var value = myModel.get("name"); // Seowoodata_path에 값이 변경되는 이벤트 발생하면 callBack을 실행합니다.
myModel.onchange("name", function () {
console.log(this);
// el: domElement - 변경이 발생한 엘리먼트, 엘리먼트로 부터 다양한 속성을 추출할 수 있다.
// jquery : jQueryObject
// tagname: "input"
// value: "changed value"
console.log(this.el.id);
});
myModel.onchange("*", function (n) {
console.log(n);
// console.log(this); 와 동일
});data-ax-repeat="list" 속성이 부여된 엘리먼트 하위에 태그중에 data-ax-repeat-click 속성을 가진 아이템에 대해 클릭 이벤트 발생하면 callBack을 실행합니다.
myModel.onclick("list", function () {
console.log(this);
/*
el: domElement
jquery: jQueryObject
item: Object - repeat item
item_index: "0" - index of item
item_path: "list[0]" - repeat data_path
repeat_path: "list"
tagname: "button"
value: "add"
*/
});data-ax-repeat="list" 하위아이템을 추가합니다.
myModel.add("list", {a:1});data-ax-repeat="list" 하위 아이템을 제거합니다. 단! 이 때 ADDED 값을 가진 아이템은 제거하고 그렇지 않은 아이템은 DELETED 값을 아이템에 추가합니다.
myModel.remove("list", 0);data-ax-repeat="list" 하위 아이템을 교체합니다.
myModel.update("list", 0, {a:1});data-ax-repeat="list" 하위 아이템중 child_key의 하위아이템을 추가합니다.
myModel.child_add("list", 0, "child", {a:1});data-ax-repeat="list" 하위 아이템중 child_key의 하위아이템을 제거합니다. 단! 이 때 ADDED 값을 가진 아이템은 제거하고 그렇지 않은 아이템은 DELETED 값을 아이템에 추가합니다.
myModel.child_remove("list", 0, "child", 0);data-ax-repeat="list" 하위 아이템중 child_key의 하위 아이템을 교체합니다.
myModel.child_update("list", 0, "child", 0, {a:1});this.model.onupdate("moderator", function () {
AXInput.alignAllAnchor();
$('#moderator-add').val('');
$moderator.find('[data-role-user-btn]').unbind("click").bind("click", role_user_btn_onclick);
});data-ax-validate 를 가진 엘리먼트에 대해 값을 검사하고 값이 없거나 짦은 경우 error를 리턴합니다.
<input type="text" data-ax-path="q" data-ax-validate="required"
title="이름" maxlength="8" class="AXInput W150" value=""/>var rs = myModel.validate(), _s;
console.log(rs); // 결과를 체크 해보세요
if(rs.error) {
_s = rs.error[0].jquery.attr("title");
alert("" + _s + "(은)는 필수 입력사항입니다." + _s + "(을)를 입력하세요");
rs.error[0].el.focus();
return;
}