Knockout api zoek form

[Verwijderd]

Ik wil een simpel formulier maken waarin er gezocht kan worden door middel van een API.


<input type="text" class="search-query" placeholder="Search" id="global-search" data-bind="value: query, valueUpdate: 'keyup'"/>

JavaScript:

var viewModel = {
    
       query : ko.observable(),
       employees : ko.observableArray(),
    
     };


    function EmployeesViewModel(query) {
          
          var self = this;
          self.query = ko.observable();
          self.employees = ko.observableArray();
          
        
         
          self.apiurl = ko.computed(function() {
        
                
                if(self.query()){
                  
                  return self.baseUri = BASE + "/api/v1/employees?q=" + self.query();
                
                }else{

                  return self.baseUri = BASE + "/api/v1/employees?limit=100&offset=0";


                }
                
                
                }, self);
                
         
         $.getJSON(self.apiurl(), self.employees);
 
        };
      
                

      ko.applyBindings(new EmployeesViewModel(viewModel.query()));

Het lukt me niet om de query variable te vullen deze blijft leeg. Wat zie ik over het hoofd?

[Xpoint]

Je geeft onderin enkel een lege string mee, de initiële waarde van viewModel.query.
Verder (je hebt dit niet als probleem aan gegeven) roep je getJSON aan zonder callback. Moet dat niet dit zijn?

JavaScript:

$.getJSON(self.apiurl(), function(json) {
  // Verwijder alle employees en vervang met het resultaat.
  self.employees.splice.apply(self.employees, [0, self.employees.length].concat(json));
}); 

Ik denk dat je viewModel zelf weg kan laten, en enkel EmployeesViewModel blijft gebruiken. Sla de referentie van EmployeesViewModel (var viewModel = new EmployeesViewModel()) op, en gebruik de deze om je query aan te passen. (viewModel.query("zoek iets")).

Verder, als je de query aanpast, wordt de apiurl inderdaad ook aangepast. Maar daar doe je verder nog niets mee. Je zou moeten luisteren naar de apiurl wanneer deze veranderd, en opnieuw getJSON aan moeten roepen.

Edit: even snel wat uitgetypt wat in mijn ogen zou moeten werken. Niet getest, maar hopelijk kun je er wat mee.

JavaScript:

function EmployeesViewModel(query) { 
    var self = this; 
    
    self.query = ko.observable(); 
    self.employees = ko.observableArray(); 

    self.apiurl = ko.computed(function() { 
        if(self.query()){ 
            return (self.baseUri = BASE) + "/api/v1/employees?q=" + self.query(); 
        }else{ 
            return (self.baseUri = BASE) + "/api/v1/employees?limit=100&offset=0"; 
        } 
    }).extend({ throttle: 500 }); // Wacht minimaal 500ms voordat we apiurl aanpassen.
    
    function refreshEmployees() {
        $.getJSON(self.apiurl(), function(json) {
            // Verwijder alle employees en vervang met het resultaat. 
            self.employees.splice.apply(self.employees, [0, self.employees.length].concat(json)); 
        }); 
    };
    
    // Vernieuw lijst van employees elke keer als de apiurl veranderd.
    self.apiurl.subscribe(refreshEmployees);
    
    refreshEmployees();
}; 

var viewModel = new EmployeesViewModel();
ko.applyBindings(viewModel);

[ Voor 42% gewijzigd door Xpoint op 19-03-2013 14:48 . Reden: Voorbeeld code ]

[Verwijderd]

ik was zelf tot deze gekomen:

JavaScript:

var employeesModel = function(){

        var self = this;

        self.u = base +'/api/v1/search';
        self.resource = 'employees';
        self.field = 'achternaam';
        self.employees = ko.observableArray([]);
        self.q = ko.observable();

        //Load Json when model is setup
        self.dummyCompute = ko.computed(function() {
            $.getJSON(self.u,{'resource': self.resource, 'field': self.field, 'q':self.q }, function(data) {
                    self.employees(data);
             });

        }, self);
    };

    ko.applyBindings(new employeesModel());

]
zonder een if else check

[Xpoint]

Omdat op je input valueUpdate op keyUp staat zal dummyCompute erg vaak een request naar je server uitvoeren (elke keer als je een toets los laat). Beter plaats je dus nog .extend({ throttle: 500 }); zoals in mijn voorbeeld. Elke keer als een dependency van dummyCompute aangepast wordt, wacht hij dan minimaal 500ms voordat hij de request uitvoert, dus 500ms lang niets hebt ingetypt.

Verder is dummyCompute niet de beste manier om een callback af te handelen, maar het werkt.

[Verwijderd]

Inderdaad, goede tip en jouw code ziet er beter uit! tnx

[NMe]

Goed, dan doe ik deze dicht. Voor een volgende keer: probeer als je een topic opent wat meer informatie te geven, zie De Quickstart. Met dit soort topics kunnen we negen van de tien keer niks omdat we maar wat moeten gissen. Bovendien is je topictitel niet erg goed als omschrijving voor je probleem. Als je daar volgende keer ook op wil letten zou dat fijn zijn.