2012-12-12 4 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