1

我正在尝试使用 kendoui 构建 javascript 可编辑网格，我想要编辑仅编辑 javascript 数据的弹出窗口（无服务器） 弹出窗口必须在用户单击每一行上的“编辑”按钮后出现，在弹出窗口上我想显示输入选定的用户姓氏和名字。我的问题是：如何访问行的数据绑定数据（因为据我所知没有 $data 变量）？

这是我的 HMTL

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>


  <script src="https://raw.github.com/rniemeyer/knockout-kendo/master/build/knockout-kendo.min.js"></script>  
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div data-bind="kendoGrid: {data:users, sortable:true, columns:[
{ field: 'firstname', width: '100px' },
{ field: 'lastname', width: '100px' },
{ field: 'lastname', width: '100px' },
{ template: '<button>edit</button>', title: ''}
]}"> </div>
</body>
</html>

这里是JS：

var userVM=function(nm,lnm){
var self=this;  

  this.firstname= ko.observable(nm);
  this.lastname= ko.observable(lnm);
  this.EditUser=function(u){


    selectedUser(u);
    $("#dialog").dialog();
  };


};
var users=ko.observableArray([new userVM('Shimon','Rapaport'),new userVM('Ahmed','ElChalil')]) ;

var selectedUser=ko.observable();



ko.applyBindings();

这是工作演示（没有编辑弹出窗口） http://jsbin.com/iwevek/1/edit

这是工作演示，我在没有 kendoui 的情况下做同样的事情非常简单 http://jsbin.com/epocov/9/edit

4

1 回答 1

1

我目前正在努力添加在网格（和列表视图）小部件中呈现 Knockout 模板的功能。这将允许您针对您的视图模型项编写普通的 KO 绑定。

如果没有这种支持，您需要一种从按钮到视图模型数据的方法。这是一个示例，其中用户有 id，id 是按钮 (data-id) 的一部分，我使用 $.on 附加委托处理程序。

从那里您可以使用 id 找到合适的用户并相应地更新您的selectedUserobservable。

$(".k-grid").on("click", ".editBtn",function() {
  var id = this.getAttribute("data-id"),
      match = ko.utils.arrayFirst(users(), function(user) {
          return user.id === id;
      });

  selectedUser(match);
});

http://jsbin.com/ixewud/2/edit

一旦你selectedUser更新了，你就可以使用你的模态弹出窗口或任何你想要的东西进行编辑。

于 2012-12-17T14:03:32.753 回答