Model
View에 바인딩 될 data와 ajax통신을 담당합니다. ajax 통신은 내부적으로 jQuery.ajax() 기능을 사용하며, ajax option 또한 jQuery.ajax의 option과 동일한 방식으로 사용합니다.
기본 코드
기본 Model 객체 생성
var model = Nue.model();
Ajax Model 객체 생성
var model = Nue.model({ ajax option });
Model Data Method
model 객체에 data를 다루는 메소드 입니다.
set()
Model에 Data를 저장합니다. Nue.js의 Model은 add/remove명령이 없고 오직 set 명령으로 전체 데이터를 저장하며, 변경된 항목을 이벤트로 캐치하는 방식으로 되어 있습니다. model에 data를 저장하는 방법은 오로지 set()명령어를 통해서만 할 수 있습니다.
var model = Nue.model();
model.set({ id: 111, name: 'nue' });//-> { id: 111, name: 'nue' }
model.set({ id: 111 });//-> { id: 111 }
model.set({ id: 111, name: 'youn' });//-> { id: 111, name: 'youn' }
/**
* Array Data 추가
*/
model.set([{ id: 111, name: 'nue'}]);
// model에 저장되어 있는 json
var newData = model.getJSON();
newData.push({ id: 222, name: 'youn' });
// 새로운 data가 추가되어 저장
model.set(newData); //-> [{id:111,name:'nue'},{id:222,name:'youn'}]
Array Data 추가 예제에서 model.getJSON()으로 가져온 newData에 새로운 Data를 push하였는데도, 왜 또다시 model.set()을 하는지 궁금하실 수 있습니다.
getJSON()은 model에 저장된 json 객체를 Deep Copy하여 리턴합니다.(아래 getJSON() 메소드 설명을 참조하십시오.)
따라서 newData에 data를 push한 것은 model에 아무런 영향을 주지 않습니다.
오로지 set() 명령으로만 저장할 수 있음을 기억하세요.
getJSON()
model에 저장된 json객체를 Deep Copy 하여 반환합니다. 따라서 model.getJSON()으로 반환된 json객체와 model에 저장된 json객체는 서로 영향을 줄 수 없습니다.
var model = Nue.model().set({ id: 111, name: 'youn' });
var newData = model.getJSON();
newData.name = 'nue';
// newData를 변환해도 model에 저장되어 있는 data는 영향받지 않는다.
console.log(newData); //-> { id: 111, name: 'nue' }
console.log(model.getJSON()); //-> { id: 111, name: 'youn' }
// model.set() 명령을 사용하여 저장한 경우
model.set(newData);
console.log(model.getJSON()); //-> { id: 111, name: 'nue' }
isType()
Model은 Object형태와 Array형태 모두 저장할 수 있습니다. 저장되는 형태에 따라 model data type이 지정되는데 이를 isType()을 이용하여 알 수 있습니다. 또는 isType의 매개변수로 Object 혹은 Array를 넣어 true/false 를 반환 받을 수 있습니다.
var model = Nue.model();
model.set({ id: 111, name: 'youn' });
console.log(model.isType()); //-> 'Object'
console.log(model.isType('Object')); //-> true
console.log(model.isType('Array')); //-> false
model.set([{ id: 111, name: 'youn' }]);
console.log(model.isType()); //-> 'Array'
console.log(model.isType('Object')); //-> false
console.log(model.isType('Array')); //-> true