正しいライブラリを選択します
優れたツールなしでJSアプリを作成することは非常に困難です。 jQueryは、DOMを操作するためのライブラリであり、アプリを作成するための根拠を提供していません。これが、Canjsに似た特別なライブラリが必要な理由です。
Canjsは、JSアプリを作成するために必要なツールを提供する軽量MVCライブラリです。
Canjsは、JSアプリを作成するために必要なツールを提供する軽量MVCライブラリです。 MVC（Model-View-Control）モード、動的テンプレートバインディング、ルートサポート、およびメモリセキュリティを備えた基本的なフレームワークを提供します。また、JQuery、Zepto、Mootools、Yui、Dojoをサポートし、豊富な拡張機能とプラグインを持っています。
あなたが学ぶパート1：
コントロールとビューレイヤー（UIテンプレート）を作成して連絡先を表示します
モデルモデルレイヤーを使用してデータを表します
FIXTURESプラグインを使用してAJAXをシミュレートしてデータを返します
あなたは興奮しなければなりません！コーディングを始めましょう。
フォルダーとHTMLを作成します
最初にアプリのフォルダーを作成し、ディレクトリに4つのサブフォルダーを作成します：CSS、JS、Views、IMG。次のように：
contacts_manager
CSS
JS
ビュー
IMG
次のコードをindex.htmlとして保存します。
コードコピーは次のとおりです。
<！doctype html>
<html lang = "en">
<head>
<メタcharset = "utf-8">
<Title> Canjs Contacts Manager </title>
<link rel = "styleSheet" 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 = "filter"> </nav>
</div>
</div>
<div>
<div id = "create"> </div>
<div id = "連絡先"> </div>
</div>
</div>
</div>
<スクリプトsrc = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script>
<スクリプトsrc = "js/can.jquery.min.js"> </script>
<スクリプトsrc = "js/can.fixture.js"> </script>
<スクリプトsrc = "js/contacts.js"> </script>
</body>
</html>
ページの下部に、必要なJS（アプリを含む：contacts.jsを含む）をロードします。
チュートリアルで使用されるCSSおよび画像ファイルはダウンロードできます。
ビューを使用してUIを作成します
ビューは、アプリのUIテンプレートをレンダリングするために使用されます。 Canjsは、さまざまなテンプレートエンジンをサポートしています。この記事では、動的バインディングを含み、サポートするEJSを使用しています。
EJSテンプレートのタグは、JSコードを含むHTMLおよびサポートに非常に似ています。一般的に使用される3つのタグは次のとおりです。
<％Code％> JSを実行します
<％= code％> JSを実行し、現在の場所でHTMLにエスケープのない結果を書き込む
<％== code％> JSを実行し、現在の場所（サブテンプレート用）で逃げた結果をHTMLに書き込みます。
テンプレートはファイルまたはスクリプトタグからロードでき、このチュートリアルはEJSファイルからロードされます。
連絡先を表示します
連絡先を作成するには、最初にEJSテンプレートを作成し、次のコードをcontactSlist.ejsとしてビューフォルダーに保存する必要があります。
コードコピーは次のとおりです。
<ul>
<％list（連絡先、関数（連絡先）{％>
<li <％=（el） - > el.data（ 'contact'、contact）％>>
<％== can.view.render（ 'views/contactView.ejs'、{
連絡先：連絡先、カテゴリ：カテゴリ
}）％>
</li>
<％}）％>
</ul>
contactlists.ejsは連絡先リストをレンダリングします。このテンプレートを分析しましょう。
コードコピーは次のとおりです。
<％list（連絡先、関数（連絡先）{％>
List（）メソッドのコールバックメソッドがオブザーバーとリストと併用されている場合、リストのデータが変更されると動的バインディングを使用して繰り返し呼ばれます。
コードコピーは次のとおりです。
<li <％=（el） - > el.data（ 'contact'、contact）％>>
上記のコードは、要素のコールバックメソッドを介して連絡先データを使用してA <li>を生成します。矢印が実行された後のメソッドの後、ELオブジェクトのデータは対応する要素に設定されます。
コードコピーは次のとおりです。
<％== can.view.render（ 'views/contactView.ejs'、{
連絡先：連絡先、カテゴリ：カテゴリ
}）％>
上記のコードは、サブテンプレートの連絡先を連絡先にレンダリングします。 can.view.render（）は、パラメーターとしてテンプレートとデータを使用してHTMLを返します。
単一の連絡先をレンダリングします
サブテンプレートは、ビューを管理可能なブロックに整理する良い方法です。また、テンプレートをシンプルで簡単に再利用できます。このテンプレートは、チュートリアルの後半で連絡先を作成し、contactView.ejsとして次のコードを保存し、ビューフォルダーを入力します。
コードコピーは次のとおりです。
<a href = "javascript：//"> <i> </i> </a>
<form>
<div>
<div>
<img src = "img/contact.png">
</div>
<div>
<入力型= "テキスト" name = "name" placeholder = "add name"
<％= contact.attr（ 'name'）？ "value = '" + contact.name + "'"： "class = 'empty'"％>>
<name = "category">を選択します
<％$ .each（カテゴリ、function（i、category）{％>
<option値= "<％= category.data％>" <％= contact.category === category.data？ 「選択」： ""％>>
<％= category.name％>
</option>
<％}）％>
</select>
</div>
<div>
<label>アドレス</label>
<入力型= "text" name = "address"
<％= contact.attr（ 'アドレス'）？ "value = '" + contact.address + "'"： "class = 'empty'"％>>
<label>電話</label>
<入力タイプ= "テキスト" name = "電話"
<％= contact.attr（ '電話'）？ "value = '" + contact.Phone + "'"： "class = 'empty'"％>>
<label>メール</label>
<入力型= "テキスト" name = "email"
<％= contact.attr（ 'メール'）？ "value = '" + contact.email + "'"： "class = 'empty'"％>>
</div>
</div>
</form>
連絡先属性は<inupt>タグに配置されているため、ユーザーの情報を編集および更新できます。
あなたの見解を活性化する（良い文学..）
ATR（）がEJS処理テンプレート中に使用される場合、その周りのコードはイベントプロセッサに引き渡され、対応する属性の変更を監視します。属性が変更されると、アプリの関連するUIが更新されます。この関数は、テンプレートの動的結合メカニズムから利益を得ます。 EJS動的結合は選択的であり、attr（）を使用する場合に対応する属性に対してのみ有効になります。
contactView.ejsの<inupt>タグを使用して、その使用法を理解します。
コードコピーは次のとおりです。
<入力型= "テキスト" name = "name" placeholder = "add name"
<％= contact.attr（ 'name'）？ "value = '" + contact.name + "'"： "class = 'empty'"％>>
特別なタグのコードはイベントに変換され、この連絡先の名前属性にバインドされます。名前属性が変更されると、イベントがトリガーされ、HTML構造が更新されます。
can.controlを使用して、ビジネスロジックを処理します
can.controlは、ウィジェットの作成やビジネスロジックの処理に使用できる組織化された内部漏れのない完全な制御を作成します。必要なデータを介してDOM要素のコントロールインスタンスを作成し、コントロール内のメソッドバインディングイベントを定義できます。
コントロールに関連付けられた要素がDOMから削除されると、コントロールはそれ自体を破壊し、バインドされた方法をクリアします。
コントロールを作成するには、can.control（）に関数を含む定義したオブジェクトを渡すことで継承します。次の事件も報告されました。
各コントロールインスタンスには、いくつかの重要な値とメソッド仕様があります。
この制御インスタンスへの参照
this.elementインスタンスで作成したDOM要素
this.optionsインスタンスを作成するために必要なパラメーターオブジェクト
INIT（）は、インスタンスが正常に作成されたときに呼び出されます
連絡先を管理します
次のコードスニペットをcontacts.jsファイルに追加して、連絡先を管理するためのコントロールを作成します。
コードコピーは次のとおりです。
連絡先= can.control（{
init：function（）{
this.element.html（can.view（ 'views/contactslist.ejs'、{
連絡先：this.options.contacts、
カテゴリ：this.options.categories
}））;
}
}）
連絡先のインスタンスが作成されると、init（）が2つのことを行います。
can.view（）を使用して連絡先をレンダリングします。 can.view（）は、テンプレートとデータまたはストリップタグを含むファイルの2つのパラメーターを受信します。ドキュメントフラージュ（DOM要素を管理する軽量コンテナ）を返します。
jquery.html（）を使用して、can.view（）のdocumentfragmentをコントロールの要素に挿入します
モデルを使用してデータを表します
モデルは、アプリデータの抽象レイヤーです。このアプリは、連絡先に対応する2つのモデルと、カテゴリに対応する2つのモデルを使用します。次のコードをcontacts.jsに追加します。
コードコピーは次のとおりです。
contact = can.model（{
Findall：「Get /Contacts」、
作成：「投稿 /連絡先」、
更新：「put /contacts /{id}」、
破壊：「削除 /連絡先 /{id}」
}、{}）;
category = can.model（{
findall：「get /categories」
}、{}）;
モデルには、CRUDデータを定義できる5つのメソッド、つまりFindall、FindOne、作成、更新、および破壊があります。これらの方法を書き換えることはできますが、最良の方法はRESTサービス（表現状態転送）を使用することです。上記のコードと同様に、アプリでは使用されない静的メソッドを無視することを心配することができます。
ここで、モデルインスタンスは実際にはCanjsの「観測可能」であることを指摘することが重要です。 can.observeは、オブジェクトのオブザーバーパターンを提供しますcan.observe.list配列の観測パターンを提供します。これは、データの変更を聞きながら、attr（）を介してデータを取得および設定できることを意味します。
findall（）メソッドは、model.listを返します。これは、要素が追加または削除されたときにcan.observe.listによってトリガーされるイベントです。
備品を使用して休息を模倣します
FixtureはAjax要求を傍受し、ファイルまたはメソッドを介して応答をシミュレートします。これは、テストやバックエンドの準備ができていない場合に非常に便利です。フィクスチャは、アプリモデルが休息をシミュレートするものです。
まず、いくつかのデータをフィクスチャに準備し、次のコードを追加する必要があります。
コードコピーは次のとおりです。
var連絡先= [
{
ID：1、
名前：「ウィリアム」、
住所：「1 Canjs Way」、
メール：「[email protected]」、
電話： '0123456789'、
カテゴリー：「同僚」
}、
{
ID：2、
名前：「ローラ」、
住所：「1 Canjs Way」、
メール：「[email protected]」、
電話： '0123456789'、
カテゴリ：「友達」
}、
{
ID：3、
名前：「リー」、
住所：「1 Canjs Way」、
電子メール： '[email protected]'、
電話： '0123456789'、
カテゴリ：「家族」
}
];
varカテゴリ= [
{
ID：1、
名前：「家族」、
データ：「家族」
}、
{
ID：2、
名前：「友達」、
データ：「友達」
}、
{
ID：3、
名前：「同僚」、
データ：「同僚」
}
];
データを使用して、それをフィクスチャに接続して、休憩をシミュレートします。 can.fixture（）は2つのパラメーターを受信します。インターセプトしたいURLと応答するファイルとメソッド。通常、インターセプトしたいURLは動的であり、パターンに従います。 URLに{}で囲まれたワイルドカードを追加するだけです。
次のコードをcontacts.jsに追加します。
コードコピーは次のとおりです。
can.fixture（ 'get /contacts'、function（）{
return [連絡先];
}）;
var id = 4;
can.fixture（ "post /contacts"、function（）{
return {id ：（ id ++）}
}）;
can.fixture（ "put /contacts /{id}"、function（）{
戻る {};
}）;
can.fixture（ "delete /contacts /{id}"、function（）{
戻る {};
}）;
can.fixture（ 'get /categories'、function（）{
return [categories];
}）;
最初の4つのフィクスチャーは、連絡先モデルのGET、POST、PUT、および削除された応答をシミュレートし、5番目はカテゴリモデルのGET応答をシミュレートします。
アプリを開始します
アプリには、データを管理し、連絡先のビューをレンダリングし、これらすべてを制御するモデルがあります。あなたが今しなければならないのは、アプリを開始することだけです。これで、アプリケーションをキックスタートする必要があります！
次のコードをcontacts.jsに追加します。
コードコピーは次のとおりです。
$（document）.ready（function（）{
$ .when（category.findall（）、contact.findall（））。
関数（categoryResponse、contactresponse）{
varカテゴリ= categoryResponse [0]、
連絡先= contactresponse [0];
新しい連絡先（ '＃連絡先'、{
連絡先：連絡先、
カテゴリ：カテゴリ：
}）;
}）;
}）;
このコードを分析しましょう。
コードコピーは次のとおりです。
$（document）.ready（function（）{
jquery.readyメソッドを使用して、DOMの準備ができていることを聞きます。
コードコピーは次のとおりです。
$ .when（category.findall（）、contact.findall（））。
関数（categoryResponse、contactresponse）{
2つのモデルのFindAll（）メソッドを呼び出して、すべての連絡先のタイプを取得します。 findall（）には遅延があるため、$ .when（）は、2つのリクエストが同時に完了した後にのみコールバックメソッドが実行されることを保証します。
コードコピーは次のとおりです。
varカテゴリ= categoryResponse [0]、
連絡先= contactresponse [0];
2つのfindall（）メソッドから対応するモデルインスタンスのデータセットを取得します。応答によって返される配列の最初の要素です。
コードコピーは次のとおりです。
新しい連絡先（ '＃連絡先'、{
連絡先：連絡先、
カテゴリ：カテゴリ：
}）;
#Contacts要素の連絡先の制御を作成します。コントロールするために連絡先とタイプデータセットが送信されます。
ブラウザでアプリを開くと、次の連絡先リストが表示されます。
要約します
これはチュートリアルシリーズの最初の章であり、あなたはすでにCanjsの中核について学びました。
アプリデータの抽象化レイヤーをモデル化します
データをHTMLに変換するテンプレートを表示します
制御組織はすべてに関連しています