如何使用挖空保存单个记录
How to save a single record with knockout
我有一个使用挖空设置的基本表,但我想知道是否有任何方法可以编辑/保存单个记录,而不必在每次进行更改时都保存整个视图模型?这是我的代码...
<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());
有什么想法吗?谢谢!
实际上,通过绑定上下文的魔力,这很容易!
-
第一步。将以下元素放置在 foreach 模板内的任何位置。
<button data-bind="click: $root.saveMovie">Save</button>
-
第二步。将
saveMovie
方法添加到视图模型self.saveMovie = function(movie) { $.ajax({ type: "POST", url: "/someurl", dataType: "json", contentType: "application/json", data: ko.toJSON(movie), success: function(result) { //... } }); }
movie
变量将包含 foreach 循环的项!为什么?因为在 Knockout 中,我们有一个惊人的功能,称为绑定上下文:
绑定上下文是保存可引用的数据的对象 从您的绑定中。应用绑定时,自动挖空 创建和管理绑定上下文的层次结构。根级别 层次结构引用您提供给的视图模型参数 ko.applyBindings(viewModel).然后,每次使用控制流时 绑定(如 with 或 foreach),用于创建子绑定上下文 这是指嵌套视图模型数据。
http://knockoutjs.com/documentation/binding-context.html
相关文章:
- mysql查询一次在单个查询中的多个表中插入记录
- 可以't在Angular js/HTML中获取单个记录
- 使用jquery获取单个记录
- 如何使用挖空保存单个记录
- 使用express和node.js更新mongodb中的单个记录
- 是为大约100条记录中的每一条呈现一个表单更快,还是用ajax加载单个表单更快
- 使用 limit 解析“or”查询将返回忽略单个查询限制的所有记录
- 为单个定期事件保存单个 DHTMLX 计划程序事件记录
- 异步瀑布返回节点 js 和 mongodb 中数组的单个记录
- 使用单个查询将多个记录插入到 webSQL 表中,来自对象数组的数据
- 使用$http.get检索单个记录
- ExtJs JSONStore loaddata方法只加载单个记录
- 使用jquery ajax从xml中检索单个记录
- AngularJS - ng-repeat多次显示单个记录
- 绑定带有单个记录的简单视图模型
- 编辑单个记录
- 选择/取消选择全部对单个记录不起作用
- ExtJS 4-更新/刷新单个记录
- Angular JS:如何从 json 数据集“加载”单个记录
- 需要在ASP.net数据列表的单个记录中识别特定元素的ID