Usando Knockout con Typeahead.js y Bloodhound.js v0.10

Question

Acabo de pasar a usar Bloodhound.js y Typeahead.js con Knockout.Tengo algunos problemas.

1. Typeahead no muestra el Name propiedad en la lista de sugerencias
2. No puedo entender cómo actualizar el conjunto para consultar

http://jsfiddle.net/Ea93f/2/

Estoy agregando datos nuevos 'estáticamente' en este momento, pero aún deberían aparecer en el conjunto de resultados, y no

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

Estoy dispuesto a recibir sugerencias que funcionen, por lo que no me veo obligado a usar Bloodhound.js si no es necesario, pero debido a la naturaleza de mi aplicación no puedo eliminar las propiedades como observables, pero llamar a ko.toJS en algún momento sí es posible. Definitivamente una opción.

Answer 1

El primer problema es con el dispositivo.Debe suministrar una función explícita en su enlace

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]();
    };

El segundo problema es con el uso de local.Parece que el sistema no recalcula la fuente después de la inicialización.Mirando los documentos que probablemente necesite hacer uso de la opción remota y pretender ser una solicitud / respuesta de AJAX.También debe implementar su propio filtro de resultados, así como la piratería alrededor de la solicitud de solicitud cuando se actualizan las opciones.

He actualizado su jsfiddle con lo siguiente ...

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();
}