0

ノックアウトを使用して基本的なテーブルを設定していますが、変更を加えるたびにビューモデル全体を保存するのではなく、単一のレコードを編集/保存する方法があるかどうか疑問に思いました。これが私のコードです...

<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());

何かご意見は？ありがとう！

4

1 に答える 1

3

実際、コンテキストをバインドする魔法を通して、これは非常に簡単です！

  1. ステップ1。次の要素をforeachテンプレート内の任意の場所に配置します。

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

  2. ステップ2。saveMovieビューモデルにメソッドを追加します

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

変数には、foreachループのmovie項目が含まれます。なんで？Knockoutには、バインディングコンテキストと呼ばれる驚くべき機能があるためです。

バインディングコンテキストは、バインディングから参照できるデータを保持するオブジェクトです。バインディングを適用している間、Knockoutはバインディングコンテキストの階層を自動的に作成および管理します。階層のルートレベルは、ko.applyBindings（viewModel）に指定したviewModelパラメーターを参照します。次に、withやforeachなどの制御フローバインディングを使用するたびに、ネストされたビューモデルデータを参照する子バインディングコンテキストが作成されます。

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

于 2012-08-13T19:11:54.243 に答える