使用Knockout与Typeahead.js和Bloodhound.js v0.10

Question

我刚刚使用Knockout转换为使用Bloodhound.js和Typeahead.js.我有几个问题 -

1. Typeahead不会Name在建议列表中显示该属性
2. 我无法弄清楚如何更新要查询的集

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

我现在"静态地"添加新数据,但它仍应显示在结果集中,而不是

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

我支持任何有效的建议,所以如果不需要,我不会使用Bloodhound.js,但由于我的应用程序的性质,我不能删除属性作为observables,但在某些时候调用ko.toJS是绝对是一个选择.

Answer 1

第一个问题是displayKey.您需要在绑定中提供显式函数

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

第二个问题是使用本地.看起来系统在初始化后不会重新计算源.查看文档,您可能需要使用远程选项并伪装成ajax请求/响应.您还需要实现自己的结果过滤器,以及在更新选项时对requestCache进行黑客攻击.

我用以下内容更新你的jsFiddle ...

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