보기(UI) 만들기Create the View (UI)
완료 된 프로젝트 다운로드Download Completed Project
이 섹션에서는 앱에 대 한 HTML 정의를 시작 하 고 HTML과 뷰 모델 간에 데이터 바인딩을 추가 합니다.In this section, you will start to define the HTML for the app, and add data binding between the HTML and the view model.
파일 Views/Home/Index. cshtml를 엽니다.Open the file Views/Home/Index.cshtml. 해당 파일의 전체 내용을 다음으로 바꿉니다.Replace the entire contents of that file with the following.
@section scripts {
@Scripts.Render("~/bundles/app")
}
<div class="page-header">
<h1>BookService</h1>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Books</h2>
</div>
<div class="panel-body">
<ul class="list-unstyled" data-bind="foreach: books">
<li>
<strong><span data-bind="text: AuthorName"></span></strong>: <span data-bind="text: Title"></span>
<small><a href="#">Details</a></small>
</li>
</ul>
</div>
</div>
<div class="alert alert-danger" data-bind="visible: error"><p data-bind="text: error"></p></div>
</div>
<div class="col-md-4">
<!-- TODO: Book details -->
</div>
<div class="col-md-4">
<!-- TODO: Add new book -->
</div>
</div>
대부분의 div 요소는 부트스트랩 스타일 지정에 대 한 것입니다.Most of the div elements are there for Bootstrap styling. 중요 한 요소는 data-bind 특성이 있는 요소입니다.The important elements are the ones with data-bind attributes. 이 특성은 HTML을 뷰 모델에 연결 합니다.This attribute links the HTML to the view model.
다음은 그 예입니다.For example:
<p data-bind="text: error">
이 예제에서 "" 바인딩을 text하면 <p> 요소가 뷰 모델에서 error 속성의 값을 표시 합니다.In this example, the "text" binding causes the <p> element to show the value of the error property from the view model. error은 ko.observable으로 선언 됨을 기억 하십시오.Recall that error was declared as a ko.observable:
self.error = ko.observable();
error에 새 값이 할당 될 때마다 녹아웃은 <p> 요소의 텍스트를 업데이트 합니다.Whenever a new value is assigned to error, Knockout updates the text in the <p> element.
foreach 바인딩은 books 배열의 콘텐츠를 반복 하도록 녹아웃에 지시 합니다.The foreach binding tells Knockout to loop through the contents of the books array. 배열에 있는 각 항목에 대해 녹아웃은 새 <li> 요소를 만듭니다.For each item in the array, Knockout creates a new <li> element. foreach 컨텍스트 내의 바인딩은 배열 항목의 속성을 참조 합니다.Bindings inside the context of the foreach refer to properties on the array item. 다음은 그 예입니다.For example:
<span data-bind="text: Author"></span>
여기서 text 바인딩은 각 책의 Author 속성을 읽습니다.Here the text binding reads the Author property of each book.
지금 응용 프로그램을 실행 하는 경우 다음과 같이 표시 됩니다.If you run the application now, it should look like this:
페이지를 로드 한 후 책 목록이 비동기적으로 로드 됩니다.The list of books loads asynchronously, after the page loads. 현재 "세부 정보" 링크가 작동 하지 않습니다.Right now, the "Details" links are not functional. 다음 섹션에서이 기능을 추가 합니다.We'll add this functionality in the next section.