JavaScript 클라이언트 만들기
이 섹션에서는 HTML, JavaScript 및 Knockout.js 라이브러리를 사용하여 애플리케이션에 대한 클라이언트를 만듭니다. 클라이언트 앱을 단계별로 빌드합니다.
- 책 목록을 표시합니다.
- 책 세부 정보를 표시합니다.
- 새 책 추가.
녹아웃 라이브러리는 MVVM(Model-View-ViewModel) 패턴을 사용합니다.
- 모델은 비즈니스 도메인(이 경우 책 및 작성자)에 있는 데이터의 서버 쪽 표현입니다.
- 보기는 HTML(프레젠테이션 계층)입니다.
- 뷰 모델은 모델을 보유하는 JavaScript 개체입니다. 뷰 모델은 UI의 코드 추상화입니다. HTML 표현에 대한 지식이 없습니다. 대신 "책 목록"과 같은 보기의 추상 기능을 나타냅니다.
뷰는 뷰 모델에 데이터 바인딩됩니다. 보기 모델에 대한 업데이트 보기에 자동으로 반영됩니다. 보기 모델은 단추 클릭과 같은 이벤트도 보기에서 가져옵니다.
이 방법을 사용하면 코드를 다시 작성하지 않고도 바인딩을 변경할 수 있으므로 앱의 레이아웃과 UI를 쉽게 변경할 수 있습니다. 예를 들어 항목 목록을 로 표시한 <ul>다음 나중에 테이블로 변경할 수 있습니다.
녹아웃 라이브러리 추가
Visual Studio의 도구 메뉴에서 NuGet 패키지 관리자를 선택합니다. 그런 후 패키지 관리자 콘솔을 선택합니다. 패키지 관리자 콘솔 창에서 다음 명령을 입력합니다.
Install-Package knockoutjs
이 명령은 Scripts 폴더에 Knockout 파일을 추가합니다.
보기 모델 만들기
app.js 라는 JavaScript 파일을 Scripts 폴더에 추가합니다. (솔루션 탐색기 스크립트 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음 JavaScript 파일을 선택합니다. 다음 코드를 붙여넣습니다.
var ViewModel = function () {
var self = this;
self.books = ko.observableArray();
self.error = ko.observable();
var booksUri = '/api/books/';
function ajaxHelper(uri, method, data) {
self.error(''); // Clear error message
return $.ajax({
type: method,
url: uri,
dataType: 'json',
contentType: 'application/json',
data: data ? JSON.stringify(data) : null
}).fail(function (jqXHR, textStatus, errorThrown) {
self.error(errorThrown);
});
}
function getAllBooks() {
ajaxHelper(booksUri, 'GET').done(function (data) {
self.books(data);
});
}
// Fetch the initial data.
getAllBooks();
};
ko.applyBindings(new ViewModel());
Knockout에서 클래스는 observable 데이터 바인딩을 사용하도록 설정합니다. 관찰 가능한 변경 내용이 변경되면 관찰 가능 개체는 모든 데이터 바인딩된 컨트롤에 알립니다. 따라서 자체적으로 업데이트할 수 있습니다. (클래스는 observableArrayobservable의 배열 버전입니다.) 먼저 보기 모델에는 다음 두 가지 관찰 가능 요소가 있습니다.
books에는 책 목록이 있습니다.error에는 AJAX 호출이 실패하는 경우 오류 메시지가 포함됩니다.
메서드는 getAllBooks AJAX를 호출하여 책 목록을 가져옵니다. 그런 다음 결과를 배열에 푸시합니다 books .
메서드는 ko.applyBindings Knockout 라이브러리의 일부입니다. 뷰 모델을 매개 변수로 사용하고 데이터 바인딩을 설정합니다.
스크립트 번들 추가
번들링은 ASP.NET 4.5의 기능으로, 여러 파일을 단일 파일로 쉽게 결합하거나 번들로 묶을 수 있습니다. 번들링은 서버에 대한 요청 수를 줄여 페이지 로드 시간을 향상시킬 수 있습니다.
파일 App_Start/BundleConfig.cs를 엽니다. RegisterBundles 메서드에 다음 코드를 추가합니다.
public static void RegisterBundles(BundleCollection bundles)
{
// ...
// New code:
bundles.Add(new ScriptBundle("~/bundles/app").Include(
"~/Scripts/knockout-{version}.js",
"~/Scripts/app.js"));
}