KO Grid バインディング

データバインディングのオプション：

data
disabled

例：

この例では、グリッドと組み合わせて使用する ViewModel が定義されています。このビューには、data プロパティがバインドされています。この値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。

ViewModel の作成：

ViewModel スクリプト	コードのコピー
function Person(data) { this.ID = ko.observable(data.ID); this.Company = ko.observable(data.Company); this.Name = ko.observable(data.Name); }; var viewModel = { data: ko.observableArray([ new Person({ ID: "ANATR", Company: "Ana Trujillo Emparedados y helados", Name: "Ana Trujillo" }), new Person({ ID: "ANTON", Company: "Antonio Moreno Taqueria", Name: "Antonio Moreno" }), new Person({ ID: "AROUT", Company: "Around the Horn", Name: "Thomas Hardy" }), new Person({ ID: "BERGS", Company: "Berglunds snabbkop", Name: "Christina Berglund" }) ]) };

ViewModel スクリプト

コードのコピー

   function Person(data) {
      this.ID = ko.observable(data.ID);  
      this.Company = ko.observable(data.Company);  
      this.Name = ko.observable(data.Name);
   };  
   var viewModel = {          
      data: ko.observableArray([                  
         new Person({  
            ID: "ANATR",  
            Company: "Ana Trujillo Emparedados y helados",  
            Name: "Ana Trujillo"
            }),                
         new Person({  
            ID: "ANTON",  
            Company: "Antonio Moreno Taqueria",    
            Name: "Antonio Moreno"
            }),                  
         new Person({  
            ID: "AROUT",  
            Company: "Around the Horn",  
            Name: "Thomas Hardy"
            }),                  
         new Person({  
            ID: "BERGS",    
            Company: "Berglunds snabbkop",    
            Name: "Christina Berglund"
            })        
         ])  
    };

バインドコントロールを使用したビューの作成：

ビューのマークアップ	コードのコピー
<table id="dataGrid" data-bind="wijgrid: { data: data, allowEditing: true }">

関連トピック

参照