2012-12-12 16 views
6

グリッドと選択コントロールがページにあります。選択値を選択すると、グリッド更新がトリガーされます。その更新は、計算を使用して行われます。たとえば、新しい値がグリッドに追加されたときに、手動でグリッドを更新して更新できますか?Knockout.js:手動で計算された

function vm(){ 
    var self = this; 

    self.items = ko.observableArray([]); 
    self.chosen_category = ko.observable(""); 

    self.pager = { 
     page_namber : ko.observable(1), 
     page_size : ko.observable(10) 
    }; 

    self.sort = { 
     field : ko.observable('name'), 
     dist : ko.observable('asc') 
    }; 
    // etc. 

    self.fetch = ko.computed(function(){ 
     $.ajax({ 
       url: '/api/items/', 
       type: 'GET', 
       data: ko.toJSON(self), 
       contentType: 'application/json', 
       success: self.items 
      }); 
    }, self); 


     self.add_item = function() { 
     //here I want to update the grid 
     self.fetch(); // not work 
     }; 
} 

確かに私は別の機能に移すことができますが、私はよりクリーンなソリューションを探しています。 ありがとう!

作業バージョン:

  function vm() { 
      var self = this; 

      self.items = ko.observableArray([]); 
      self.chosen_category = ko.observable("test"); 

      self.pager = { 
       page: ko.observable(1), 
       size: ko.observable(10) 
      }; 

      self.sort = { 
       field: ko.observable('name'), 
       dist: ko.observable('asc') 
      }; 

      self.fetch = function() { 
       var data = { 
        category: self.chosen_category(), 
        pager: ko.toJS(self.pager), 
        sort: ko.toJS(self.sort) 
       }; 

       $.ajax({ 
        url: '/api/items/', 
        type: 'POST', 
        data: ko.toJSON(data), 
        contentType: 'application/json', 
        success: self.items 
       }); 
      }; 

      self._auto_update = ko.computed(self.fetch).extend({ throttle: 1 }); ; 

      self.add_item = function() { 
       self.fetch(); 
      }; 
     } 
+1

を:

function vm(){ var self = this; self.items = ko.observableArray([]); self.chosen_category = ko.observable(""); self.fetch = function(){ $.get('/api/items/' + self.chosen_category(), self.items); }; self.chosen_category.subscribe(self.fetch); self.add_item = function() { //here I want to update the grid self.fetch(); }; } 

はまた、あなたが計算と同じ操作を行うことができます。その場合は、あなたは、サブスクリプションおよび手動コールの両方に使用する機能をフェッチ定義することができますobservableArrayしかし、私はあなたが計算されたオブザーバブルを使用している方法が好きであるかどうかはわかりません – Anders

+0

KnockOutの考えは、あなたが物事を観測可能にし、自分でそれを引き起こさないということだと思います。 fetchメソッドは、コレクションの変更によって自動的に呼び出されます。私はどのように探しています、あなたはより完全な例を持っていますか? – EricG

答えて

9

subscriptionの代わりcomputedでこれを行うことをお勧めします。項目があるので、あなたはそれを手動で更新する必要がいけない

function vm(){ 
    var self = this; 

    self.items = ko.observableArray([]); 
    self.chosen_category = ko.observable(""); 

    self.fetch = function(){ 
    $.get('/api/items/' + self.chosen_category(), self.items); 
    }; 

    self.doStaff = ko.computed(self.fetch); 


    self.add_item = function() { 
    //here I want to update the grid 
    self.fetch(); 
    }; 
} 
+0

はい、このソリューションは機能しますが、今後、さらに多くのフィールドをサーバーに送信する予定がある場合は、それらのすべてに対してサブスクライブを追加する必要があります。 –

+0

同じことを計算で行うことができます。その場合、koは関数で使用されているすべてのオブザーバブルを自動的にサブスクライブします。 –

+0

@AndrewLuzkovky私はこれを明示的に行うことをお勧めします。また、私はそれが要求としてVMを送ることは最善の考えではないと思います - あなたは本当にクエリをカプセル化するための他のオブジェクトを持っているべきです。さらに、RESTサービスからJSON配列を返すことは安全ではありません:http://incompleteness.me/blog/2007/03/05/json-is-not-as-safe-as-people-think-it-is/ – Stefan