올바른 라이브러리를 선택하십시오
좋은 도구없이 JS 앱을 만드는 것은 매우 어렵습니다. jQuery는 DOM을 운영하기위한 라이브러리 일 뿐이며 앱 생성의 근거를 제공하지 않습니다. 이것이 우리가 Canjs와 유사한 특별 도서관을 원인 이유입니다.
CANJS는 JS 앱을 만드는 데 필요한 도구를 제공하는 가벼운 MVC 라이브러리입니다.
CANJS는 JS 앱을 만드는 데 필요한 도구를 제공하는 가벼운 MVC 라이브러리입니다. MVC (Model-View-Control) 모드, 동적 템플릿 바인딩, 경로 지원 및 메모리 보안으로 기본 프레임 워크를 제공합니다. 또한 jQuery, Zepto, Mootools, Yui, Dojo를 지원하며 풍부한 확장 및 플러그인이 있습니다.
1 부 당신은 배웁니다.
연락처를 표시하려면 제어 및보기 레이어 (UI 템플릿)를 작성하십시오.
모델 모델 계층을 사용하여 데이터를 나타냅니다
Fixtures 플러그인을 사용하여 AJAX를 시뮬레이션하여 데이터를 반환하십시오
당신은 흥분해야합니다! 코딩을 시작합시다.
폴더와 HTML을 만듭니다
먼저 앱 용 폴더를 작성한 다음 디렉토리에서 CSS, JS, Views 및 IMG에 4 개의 하위 폴더를 만듭니다. 다음과 같이 :
Contacts_Manager
CSS
JS
보기
IMG
다음 코드를 index.html로 저장합니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html lang = "en">
<헤드>
<meta charset = "utf-8">
<title> Canjs Contacts Manager </title>
<link rel = "스타일 시트"href = "css/bootstrap.min.css">
<link rel = "Stylesheet"href = "css/contacts.css">
</head>
<body>
<div>
<div>
<div>
<H1> 연락처 관리자 </h1>
</div>
</div>
<div>
<div>
<div>
<nav id = "필터"> </nav>
</div>
</div>
<div>
<div id = "create"> </div>
<div id = "연락처"> </div>
</div>
</div>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script>
<script src = "js/can.jquery.min.js"> </script>
<script src = "js/can.fixture.js"> </script>
<script src = "js/contacts.js"> </script>
</body>
</html>
페이지 하단에서 필요한 JS (앱 포함 : contacts.js 포함)를로드합니다.
자습서에 사용 된 CSS 및 이미지 파일을 다운로드 할 수 있습니다.
보기를 사용하여 UI를 만듭니다
보기는 앱의 UI 템플릿을 렌더링하는 데 사용됩니다. CANJS는 다양한 템플릿 엔진을 지원합니다. 이 기사는 동적 바인딩을 포함하고 지원하는 EJ를 사용합니다.
EJS 템플릿의 태그는 HTML 및 JS 코드를 포함하는 지원과 매우 유사합니다. 일반적으로 사용되는 세 가지 태그는 다음과 같습니다.
< % 코드 %> JS를 실행합니다
< %= Code %> JS를 실행하고 현재 위치에서 HTML에 html에 흡입되지 않은 결과를 씁니다.
< %== Code %> JS를 실행하고 탈출 된 결과를 현재 위치 (하위 테임 플레이트의 경우)에서 HTML에 씁니다.
템플릿은 파일 또는 스크립트 태그에서로드 할 수 있으며이 자습서는 EJS 파일에서로드됩니다.
연락처 표시
연락처를 만들려면 먼저 EJS 템플릿을 작성하고 다음 코드를 컨에 컨설팅 폴더에 ContactSlist.ejs로 저장해야합니다.
코드 사본은 다음과 같습니다.
<ul>
< % list (contacts, function (contact) { %>
<li < %= (el)-> el.data ( 'contact', contact) %>>
<%== can.view.render ( 'views/contactView.ejs', {
연락처 : 연락처, 카테고리 : 카테고리
}) %>
</li>
< %}) %>
</ul>
ContactLists.ejs는 연락처 목록을 렌더링합니다. 이 템플릿을 분석합시다.
코드 사본은 다음과 같습니다.
< % list (contacts, function (contact) { %>
List () 메소드의 콜백 메소드가 관찰자와 함께 목록과 함께 사용되는 경우 목록의 데이터가 변경되면 동적 바인딩을 반복적으로 사용합니다.
코드 사본은 다음과 같습니다.
<li < %= (el)-> el.data ( 'contact', contact) %>>
위의 코드는 요소의 콜백 메소드를 통해 연락처 데이터와 <li>를 생성합니다. 화살표가 실행 된 후 방법이 실행 된 후, EL 객체의 데이터가 해당 요소로 설정됩니다.
코드 사본은 다음과 같습니다.
<%== can.view.render ( 'views/contactView.ejs', {
연락처 : 연락처, 카테고리 : 카테고리
}) %>
위의 코드는 서브 테드 플레이트 contactView.ejs를 연락처로 렌더링합니다. can.view.render ()는 템플릿과 데이터를 매개 변수로 반환합니다.
단일 연락처를 렌더링합니다
하위 템플릿은 관리 가능한 블록으로 뷰를 구성하는 좋은 방법입니다. 또한 템플릿을 간단하고 재사용하기 쉽게 만듭니다. 이 템플릿은 튜토리얼의 뒷부분에서 연락처를 작성하고 다음 코드를 contactView.ejs로 저장하고 views 폴더를 입력하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
<a href = "javaScript : //"> <i> </i> </a>
<양식>
<div>
<div>
<img src = "img/contact.png">
</div>
<div>
<입력 유형 = "텍스트"이름 = "이름"자리 표시기 = "이름 추가"
<%= contact.attr ( 'name')? "value = '" + contact.name + "'": "class = 'empty'" %>>
<select name = "category">
< % $ .Each (카테고리, 함수 (i, 카테고리) { %>
<옵션 값 = "<%= category.data%>"<%= contact.category === category.data? "선택된": "" %>>
< %= category.name %>
</옵션>
< %}) %>
</선택>
</div>
<div>
<라벨> 주소 </label>
<입력 유형 = "텍스트"이름 = "주소"
<%= contact.attr ( '주소')? "value = '" + contact.address + "'": "class = 'empty'" %>>
<라벨> 전화 </label>
<입력 유형 = "텍스트"이름 = "폰"
<%= contact.attr ( '전화')? "value = '" + contact.phone + "'": "class = 'empty'" %>>
<라벨> 이메일 </label>
<입력 유형 = "텍스트"이름 = "이메일"
<%= contact.attr ( '이메일')? "value = '" + contact.email + "'": "class = 'empty'" %>>
</div>
</div>
</form>
연락처 속성은 <input> 태그에 배치되어 사용자의 정보를 편집하고 업데이트 할 수 있습니다.
당신의 견해를 활성화하십시오 (좋은 문학 ..)
EJS 프로세싱 템플릿 중에 attr ()가 사용되는 경우 주변의 코드는 이벤트 프로세서에 양도되어 해당 속성의 변경 사항을 모니터링합니다. 속성이 변경되면 앱의 관련 UI가 업데이트됩니다. 이 기능은 템플릿 동적 바인딩 메커니즘의 이점을 얻습니다. EJS 동적 바인딩은 선택적이며 attr ()가 사용될 때만 해당 속성에 대해서만 활성화됩니다.
ContactView.ejs에서 <입력> 태그를 사용하여 사용법을 이해합니다.
코드 사본은 다음과 같습니다.
<입력 유형 = "텍스트"이름 = "이름"자리 표시기 = "이름 추가"
<%= contact.attr ( 'name')? "value = '" + contact.name + "'": "class = 'empty'" %>>
특수 태그의 코드는 이벤트로 변환 되어이 연락처의 이름 속성으로 바인딩됩니다. 이름 속성이 변경되면 이벤트가 트리거되고 HTML 구조가 업데이트됩니다.
비즈니스 로직을 처리하려면 can.control을 사용하십시오
CAN.Control은 위젯을 만들거나 비즈니스 로직을 처리하는 데 사용할 수있는 체계적이고 내부적으로 누출이없고 완전한 제어를 만듭니다. 필요한 데이터를 통해 DOM 요소에 대한 제어 인스턴스를 생성하고 제어에서 메소드 바인딩 이벤트를 정의 할 수 있습니다.
제어와 관련된 요소가 DOM에서 삭제되면 제어가 스스로 파괴되고 바운드 방법을 제거합니다.
컨트롤을 만들려면 함수를 can.control ()에 포함하는 객체를 전달하여 상속합니다. 다음 사건도보고되었습니다.
각 제어 인스턴에는 몇 가지 중요한 값과 메소드 사양이 있습니다.
이 제어 인스턴스에 대한 참조
이 요소 인스턴스에서 만든 DOM 요소입니다
인스턴스를 생성하는 데 필요한 매개 변수 개체입니다
인스턴스가 성공적으로 생성 될 때 init ()가 호출됩니다
연락처 관리
연락처 관리를위한 컨트롤을 작성하려면 다음 코드 스 니펫을 Contacts.js 파일에 추가하십시오.
코드 사본은 다음과 같습니다.
contacts = can.control ({{
init : function () {
this.element.html (can.view ( 'views/contactslist.ejs', {
연락처 : this.options.contacts,
카테고리 : this.options.categories
});
}
})
연락처 인스턴스가 만들어지면 init ()는 두 가지를 수행합니다.
can.view ()를 사용하여 연락처를 렌더링하십시오. can.view ()는 두 가지 매개 변수를 수신합니다 : 템플릿과 데이터가 포함 된 파일 또는 스트립 태그; DocumentFragment (DOM 요소를 관리하는 가벼운 컨테이너)를 반환합니다.
jquery.html ()을 사용하여 CAN.View ()의 DocumentFragment를 컨트롤 요소에 삽입하십시오.
모델을 사용하여 데이터를 나타냅니다
모델은 앱 데이터의 추상 계층입니다. 이 앱은 두 가지 모델을 사용합니다. 하나는 연락처에 해당하고 다른 하나는 카테고리에 해당합니다. 연락처에 다음 코드를 추가하십시오 .js :
코드 사본은 다음과 같습니다.
contact = can.model ({
Findall : 'Get /Contacts',
작성 : "Post /Contacts",
업데이트 : "put /contacts /{id}",
파괴 : "삭제 /연락처 /{id}"
}, {});
카테고리 = can.model ({{
Findall : 'Get /Categories'
}, {});
모델에는 CRUD 데이터를 정의 할 수있는 5 가지 방법, 즉 Findall, FindOne, 작성, 업데이트 및 파괴가 있습니다. 이 방법을 다시 쓸 수 있지만 가장 좋은 방법은 나머지 서비스 (표현 상태 전송)를 사용하는 것입니다. 위의 코드와 마찬가지로 앱에서 사용되지 않을 정적 메소드를 무시하는 것에 대해 걱정할 수 있습니다.
여기서 모델 인스턴스는 실제로 Canjs의 '관찰 가능'임을 지적하는 것이 중요합니다. can.observe 객체의 관찰자 패턴을 제공 할 수 있습니다. can.observe.list는 배열의 관찰 패턴을 제공합니다. 즉, 데이터 변경 사항을 듣는 동안 Att ()을 통해 데이터를 얻고 설정할 수 있습니다.
findall () 메소드는 model.list를 반환합니다.
고정물을 사용하여 휴식을 모방하십시오
Fixture는 Ajax를 요청하고 파일 또는 방법을 통해 응답을 시뮬레이션합니다. 이것은 테스트 또는 백엔드가 준비되지 않은 경우에 매우 유용합니다. 고정물은 앱 모델이 REST를 시뮬레이션하는 것입니다.
먼저, 고정에 대한 일부 데이터를 준비하고 다음 코드를 추가해야합니다.
코드 사본은 다음과 같습니다.
var contacts = [
{
ID : 1,
이름 : '윌리엄',
주소 : '1 Canjs Way',
이메일 : '[email protected]',
전화 : '0123456789',
카테고리 : '동료'
},
{
ID : 2,
이름 : 'Laura',
주소 : '1 Canjs Way',
이메일 : '[email protected]',
전화 : '0123456789',
카테고리 : '친구'
},
{
ID : 3,
이름 : 'Lee',
주소 : '1 Canjs Way',
이메일 : '[email protected]',
전화 : '0123456789',
카테고리 : '가족'
}
];
var 카테고리 = [
{
ID : 1,
이름 : '가족',
데이터 : '가족'
},
{
ID : 2,
이름 : '친구',
데이터 : '친구'
},
{
ID : 3,
이름 : '동료',
데이터 : '동료'
}
];
데이터를 사용하여 고정에 연결하여 휴식을 시뮬레이션하십시오. can.fixture ()는 두 개의 매개 변수를 수신합니다. 가로 채고 싶은 URL과 응답 파일 및 메소드. 일반적으로 인터셉트하려는 URL은 동적이며 패턴을 따릅니다. URL에 {}로 둘러싸인 와일드 카드를 추가하십시오.
연락처에 다음 코드를 추가하십시오 .js :
코드 사본은 다음과 같습니다.
can.fixture ( 'get /contacts', function () {
반환 [연락처];
});
var id = 4;
can.fixture ( "post /contacts", function () {
반환 {id : (id ++)}
});
can.fixture ( "put /contacts /{id}", function () {
반품 {};
});
can.fixture ( "delete /contacts /{id}", function () {
반품 {};
});
can.fixture ( 'get /categories', function () {
반환 [카테고리];
});
처음 4 개의 비품은 접점 모델의 Get, Post, Put 및 Delete 응답을 시뮬레이션하며 다섯 번째는 카테고리 모델의 GET 응답을 시뮬레이션합니다.
앱을 시작하십시오
앱에는 데이터를 관리하고 연락처의 뷰를 렌더링 하며이 모든 것을 제어하도록하는 모델이 있습니다. 지금해야 할 일은 앱을 시작하는 것입니다. 이제 응용 프로그램을 시작해야합니다!
연락처에 다음 코드를 추가하십시오 .js :
코드 사본은 다음과 같습니다.
$ (document) .ready (function () {
$. $.
함수 (CategoryResponse, ContacTresponse) {
var 범주 = CategoryResponse [0],
contacts = contactresponse [0];
새로운 연락처 ( '#contacts', {
연락처 : 연락처,
카테고리 : 카테고리 :
});
});
});
이 코드를 분석합시다.
코드 사본은 다음과 같습니다.
$ (document) .ready (function () {
jQuery.ready 메소드를 사용하여 DOM의 준비를 듣습니다.
코드 사본은 다음과 같습니다.
$. $.
함수 (CategoryResponse, ContacTresponse) {
모든 연락처의 유형을 얻으려면 두 모델의 findall () 메소드를 호출하십시오. findall ()에 지연이 있으므로 $. ()은 두 요청이 동시에 완료된 후에 만 콜백 메소드가 실행되도록합니다.
코드 사본은 다음과 같습니다.
var 범주 = CategoryResponse [0],
contacts = contactresponse [0];
두 개의 findall () 메소드에서 해당 모델 인스턴스의 데이터 세트를 가져옵니다. 응답으로 반환 된 배열의 첫 번째 요소입니다.
코드 사본은 다음과 같습니다.
새로운 연락처 ( '#contacts', {
연락처 : 연락처,
카테고리 : 카테고리 :
});
#contacts 요소에 대한 연락처 제어를 만듭니다. 연락처 및 유형 데이터 세트가 제어하도록 전송됩니다.
브라우저로 앱을 열면 다음 연락처 목록이 표시됩니다.
요약
이것은 튜토리얼 시리즈의 첫 번째 장이며 이미 CANJS의 핵심에 대해 배웠습니다.
앱 데이터의 추상화 계층
데이터를 HTML로 변환하는 템플릿을 봅니다
통제 조직은 모든 것과 관련이 있습니다