Usando knockout con typeahead.js e bloodhound.js v0.10

Question

Ho appena convertito per usare Bloodhound.js e Typeahead.js con knockout.Sto avendo alcuni problemi -

.
1. La punta di typeahead non viene visualizzata la proprietà Name nell'elenco dei suggerimenti
2. Non riesco a capire come aggiornare il set su query contro

http://jsfiddle.net/ea93f/2/

Io sono "staticamente" aggiungendo nuovi dati in questo momento, ma dovrebbe ancora presentarsi nel set di risultati, e non è

self.addNew = function () {
    self.someOptions.push(new Option(self.someOptions().length + 1, 'Johnnn'));
}

.

Sono su per qualsiasi suggerimento che funziona, quindi non sono bloccato usando Bloodhound.js Se non è richiesto, ma a causa della natura della mia app non posso rimuovere le proprietà come osservabili, ma chiamando Ko.TOJSQualche punto è sicuramente un'opzione.

Answer 1

Il primo problema è con il displayKey.È necessario fornire una funzione esplicita nel tuo legame

html

<input type="text" data-bind="typeahead: { name: 'something', taOptions: theseOptions, displayKey: 'Name' }, value: thisValue" />

.

javascript

    // In ko.bindingHandlers.typeahead.init function
    var displayKey = options.displayKey;
    options.displayKey = function(item) {
        return item[displayKey]();
    };

.

Il secondo problema è con l'uso del locale.Sembra che il sistema non ricalcola la fonte dopo l'inizializzazione.Guardando i documenti che probabilmente hai bisogno di utilizzare l'opzione remota e fingere di essere una richiesta / risposta Ajax.È inoltre necessario implementare il tuo filtro dei risultati, oltre a hacking intorno ai readcache quando le opzioni vengono aggiornate.

Ho aggiornato il tuo jsfiddle con il seguente ...

self.theseOptions = new Bloodhound({
  datumTokenizer: function(d) { 
      var seomth = Bloodhound.tokenizers.whitespace(d.Name());
      console.log(seomth);
      return seomth },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote : {
        url : '%QUERY',
        transport : function(url, options, onSuccess, onError) {
            var deferred = $.Deferred();
            deferred.done( function() { onSuccess(this); });

            var filterVal = url.toLowerCase();
            var result = self.someOptions().filter( function(item) {
                return !!~item.Name().toLowerCase().indexOf(filterVal);
            });
            deferred.resolveWith( result );
            return deferred.promise();
        }

    }
  //local: self.someOptions()
});

self.addNew = function () {
    self.someOptions.push(new Option(self.someOptions().length + 1, 'Johnnn'));
    self.theseOptions.transport.constructor.resetCache();
}

.