Question

我正在尝试使用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

Answer 1

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

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

从那里，您可以使用ID来查找合适的用户并相应地更新您的selectedUser观察点。

$(".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，那么您可以使用模态弹出窗口或任何您想要编辑的内容。

如何访问网格行

1 个答案: