데이터베이스에 새 항목 추가Add a New Item to the Database

• 06/16/2014
• 읽는 데 2분 걸림
• • M
  • o

Mike Wassonby Mike Wasson

완료 된 프로젝트 다운로드Download Completed Project

이 섹션에서는 사용자가 새 책을 만드는 기능을 추가 합니다.In this section, you will add the ability for users to create a new book. Node.js에서 뷰 모델에 다음 코드를 추가 합니다.In app.js, add the following code to the view model:

self.authors = ko.observableArray();
self.newBook = {
    Author: ko.observable(),
    Genre: ko.observable(),
    Price: ko.observable(),
    Title: ko.observable(),
    Year: ko.observable()
}

var authorsUri = '/api/authors/';

function getAuthors() {
    ajaxHelper(authorsUri, 'GET').done(function (data) {
        self.authors(data);
    });
}

self.addBook = function (formElement) {
    var book = {
        AuthorId: self.newBook.Author().Id,
        Genre: self.newBook.Genre(),
        Price: self.newBook.Price(),
        Title: self.newBook.Title(),
        Year: self.newBook.Year()
    };

    ajaxHelper(booksUri, 'POST', book).done(function (item) {
        self.books.push(item);
    });
}

getAuthors();

Index cshtml에서 다음 태그를 바꿉니다.In Index.cshtml, replace the following markup:

<div class="col-md-4">
    <!-- TODO: Add new book -->
</div>

다음으로 바꿉니다.With:

<div class="col-md-4">
<div class="panel panel-default">
  <div class="panel-heading">
    <h2 class="panel-title">Add Book</h2>
  </div>

  <div class="panel-body">
    <form class="form-horizontal" data-bind="submit: addBook">
      <div class="form-group">
        <label for="inputAuthor" class="col-sm-2 control-label">Author</label>
        <div class="col-sm-10">
          <select data-bind="options:authors, optionsText: 'Name', value: newBook.Author"></select>
        </div>
      </div>

      <div class="form-group" data-bind="with: newBook">
        <label for="inputTitle" class="col-sm-2 control-label">Title</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputTitle" data-bind="value:Title"/>
        </div>

        <label for="inputYear" class="col-sm-2 control-label">Year</label>
        <div class="col-sm-10">
          <input type="number" class="form-control" id="inputYear" data-bind="value:Year"/>
        </div>

        <label for="inputGenre" class="col-sm-2 control-label">Genre</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputGenre" data-bind="value:Genre"/>
        </div>

        <label for="inputPrice" class="col-sm-2 control-label">Price</label>
        <div class="col-sm-10">
          <input type="number" step="any" class="form-control" id="inputPrice" data-bind="value:Price"/>
        </div>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>
</div>

이 태그는 새 작성자를 제출 하기 위한 폼을 만듭니다.This markup creates a form for submitting a new author. Author 드롭다운 목록의 값은 뷰 모델에서 관찰 가능한 authors에 대 한 데이터 바인딩됩니다.The values for the author drop-down list are data-bound to the authors observable in the view model. 다른 양식 입력의 경우 값은 뷰 모델의 newBook 속성에 데이터 바인딩됩니다.For the other form inputs, the values are data-bound to the newBook property of the view model.

양식의 제출 처리기는 addBook 함수에 바인딩됩니다.The submit handler on the form is bound to the addBook function:

<form class="form-horizontal" data-bind="submit: addBook">

addBook 함수는 데이터 바인딩된 양식 입력의 현재 값을 읽어 JSON 개체를 만듭니다.The addBook function reads the current values of the data-bound form inputs to create a JSON object. 그런 다음 /api/books에 JSON 개체를 게시 합니다.Then it POSTs the JSON object to /api/books.