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

そして、これは非常に単純な剣道を使用せずに同じことを行うデモです http://jsbin.com/epocov/9/edit

4

1 に答える 1

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モーダルポップアップまたは編集に必要なものを使用できます。

于 2012-12-17T14:03:32.753 に答える