녹아웃을 사용하여 단일 레코드를 저장하는 방법

Question

녹아웃을 사용하여 기본 테이블을 설정했지만, 매번 전체보기 모델을 저장하지 않고 단일 레코드를 편집/저장하는 방법이 있는지 궁금합니다. 변경이 이루어 졌습니까? 여기에 ...

<tbody data-bind="foreach: movies"> 
    <tr> 
     <td data-bind="text: title"></td> 
     <td data-bind="text: releaseDate"></td> 
     <td data-bind="text: genre"></td> 
     <td data-bind="text: price"></td> 
     <td><input type="button" value="Edit" id="edit"/></td> 
    </tr> 
    <tr class="editable"> <!-- hide this initially, only show when edit button is clicked --> 
     <td><input id="titleInput" data-bind="value: title" /></td> 
     <td><input id="releaseDateInput" data-bind="value: releaseDate" /></td> 
     <td><input id="genreInput" data-bind="value: genre" /></td> 
     <td><input id="priceInput" data-bind="value: price" /></td> 
    </tr> 
<!-- save button/form or something here containing ONLY this record --> 

</tbody> 
</table> 


<script type="text/javascript"> 

function Film(data) { 
    this.title = ko.observable(data.Title); 
    this.releaseDate = ko.observable(data.ReleaseDate); 
    this.genre = ko.observable(data.Genre); 
    this.price = ko.observable(data.Price); 
} 

function MovieListViewModel() { 
    var self = this; 
    self.movies = ko.observableArray([]); 
    self.title = ko.observable(); 
    self.releaseDate = ko.observable(); 
    self.genre = ko.observable(); 
    self.price = ko.observable(); 

    $.getJSON("/Movies/GetAllMovies", function (allMovies) { 
     var mappedMovies = $.map(allMovies, function (movie) { return new Film(movie) }); 
     self.movies(mappedMovies); 
    }); 
} 

ko.applyBindings(new MovieListViewModel()); 

어떤 생각 내 코드입니까? 감사!

Answer 1

실제로, binding contexts의 마술을 통해, 이것은 아주 쉽습니다!

1. 1 단계. foreach 템플릿 안에 다음 요소를 배치하십시오.

   <button data-bind="click: $root.saveMovie">Save</button> 
   

2. 2 단계. 당신의 foreach 루프의 항목이 포함됩니다 당신의 ViewModel

   self.saveMovie = function(movie) { 
       $.ajax({ 
        type: "POST", 
        url: "/someurl", 
        dataType: "json", 
        contentType: "application/json", 
        data: ko.toJSON(movie), 
        success: function(result) { 
         //... 
        } 
       }); 
   } 
   

movie 변수에 saveMovie 방법을 추가! 왜? 녹아웃에, 우리는 놀라운 기능을 호출 바인딩 컨텍스트를 가지고 있기 때문에 :

결속 상황은 당신이 당신의 바인딩에서 를 참조 할 수있는 데이터를 보유하는 객체입니다. 바인딩을 적용하는 동안 Knockout은 자동으로 을 만들고 바인딩 컨텍스트의 계층 구조를 관리합니다. 의 루트 수준은 ko.applyBindings (viewModel)에 제공 한 viewModel 매개 변수를 참조합니다. 그런 다음 with 또는 foreach와 같은 컨트롤 흐름 바인딩을 사용할 때마다 중첩 된 뷰 모델 데이터를 참조하는 자식 바인딩 컨텍스트 이 만들어집니다.

는

http://knockoutjs.com/documentation/binding-context.html