【问题标题】:How to save a single record with knockout如何使用淘汰赛保存单个记录
【发布时间】:2012-08-10 01:14:03
【问题描述】:

我有一个使用敲除设置的基本表,但我想知道是否有任何方法可以编辑/保存单个记录,而不是每次进行更改时都必须保存整个视图模型?这是我的代码...

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

有什么想法吗?谢谢!

【问题讨论】:

    标签: c# javascript asp.net-mvc-3 knockout.js


    【解决方案1】:

    其实,通过binding contexts的魔力,这很容易!

    1. 第一步。将以下元素放在 foreach 模板中的任何位置。

      <button data-bind="click: $root.saveMovie">Save</button>
      
    2. 第二步。将saveMovie 方法添加到您的viewModel

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

    movie 变量将包含您的 foreach 循环的项目!为什么?因为在 Knockout 中,我们有一个惊人的特性,称为绑定上下文:

    绑定上下文是一个对象,其中包含您可以引用的数据 从你的绑定。应用绑定时,自动淘汰 创建和管理绑定上下文的层次结构。的根级别 层次结构是指您提供给的 viewModel 参数 ko.applyBindings(viewModel)。然后,每次使用控制流 绑定,例如 with 或 foreach,创建子绑定上下文 引用嵌套视图模型数据。

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

    【讨论】:

    • 我现在唯一遇到的问题是将它发送到控制器......我已经看过这个stackoverflow.com/questions/4656232/…,当我这样做时...... window.location = '/Movies/ SaveMovie?movie=' + 电影;在self.updateMovie方法里面,它调用了方法,但是数据没有正确映射什么的,想知道你有没有什么想法?这是控制器方法(带有详细视图): public ViewResult UpdateMovie(MovieViewModel movie) { return View("TestView", movie); }
    • 你能贴出 saveMovie() 的代码吗?在那里,您应该创建一个反映 MovieViewModel 的 JSON 对象并执行 $.post。或者发布一个代表 MovieViewModel 的 FORM。
    • 好的。从我的 iPhone 上看可能不太好看:$.ajax({ url: '/echo/json/', data: ko.toJS(movie), type:'post', success: function(data) { }, dataType: 'json' });
    • @Martin Devillers 谢谢我几乎有同样的事情......我认为问题的一部分是(仅出于测试目的)我让该控制器方法将我重定向到另一个页面(不仅仅是只是保存更新)...将我带到一个包含记录详细信息的页面... public ViewResult UpdateMovie(MovieViewModel movie) { return View("TestView", movie); }
    • @Martin Devlers 非常感谢,我明天有时间试试
    猜你喜欢
    • 1970-01-01
    • 2012-10-08
    • 2014-09-14
    • 2017-02-15
    • 2015-02-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-09
    • 2014-01-14
    相关资源
    最近更新 更多