Jquery TwitterTypeahead、击倒JS和TwitterBootstrap3玩得不好

我正在尝试使用Bootstrap3获得typeahead jQuery的自定义绑定，以便在Durandal2.0中使用它，但它还不能完全工作。原始绑定如下所示：

koObject.bindingHandlers.typeahead = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var $element = $(element);
        var allBindings = allBindingsAccessor();
        var typeaheadOpts = { source: koObject.utils.unwrapObservable(valueAccessor()) };

        if (allBindings.typeaheadOptions) {
            $.each(allBindings.typeaheadOptions, function(optionName, optionValue) {
                typeaheadOpts[optionName] = koObject.utils.unwrapObservable(optionValue);
            });
        }

        $element.attr("autocomplete", "off").typeahead(typeaheadOpts);
    }
};

自从Bootstrap3以来，typeahead是一个独立的插件，所以我需要做一些更改。我已将绑定修改为如下所示：

koObject.bindingHandlers.typeahead = {
    init: function (element, valueAccessor, bindingAccessor) {
        var $e = $(element),
            options = koObject.utils.unwrapObservable(valueAccessor());

        console.dir(options.source());

        console.dir($e);

        // passing in `null` for the `options` arguments will result in the default
        // options being used
        $e.typeahead({ 
            highlight: true,
            minLength: 2,           
        },
        {             
            source: options.source()
        }).on('typeahead:selected', function (el, datum) {
            console.dir(datum);
        }).on('typeahead:autocompleted', function (el, datum) {
            console.dir(datum);
        });

    }
};

我已经简化了knockout引导示例HTML，只演示了typeahead绑定。我遇到的问题是，当typeahead试图提供建议时，它会断线抛出一个

未捕获的TypeError:object不是一个函数

异常。我已经尝试为此创建了一个应用程序，但目前它还不能正常工作

我错过了什么才能获得Twitter typeahead 0.10.2 jQuery、淘汰赛3.1.0、Bootstrap 3.1.1和Durandal 2.0？

。我所做的就是使用

substringMatcher

函数，将

jsFrameworks

数组作为typeahead源代码传递给它

因此，当您启动typeahead时，绑定处理程序中的

source

选项变为：

source:substringMatcher（options.source（））

其中

options.source（）

是

jsFrameworks

可观察数组的底层数组

下面是完整的绑定处理程序

ko.bindingHandlers.typeahead = {
        init: function (element, valueAccessor, bindingAccessor) {
            var substringMatcher = function (strs) {
                return function findMatches(q, cb) {
                    var matches, substringRegex;

                    // an array that will be populated with substring matches
                    matches = [];

                    // regex used to determine if a string contains the substring `q`
                    substrRegex = new RegExp(q, 'i');

                    // iterate through the pool of strings and for any string that
                    // contains the substring `q`, add it to the `matches` array
                    $.each(strs, function (i, str) {
                        // console.log(str);
                        if (substrRegex.test(str)) {
                            // the typeahead jQuery plugin expects suggestions to a
                            // JavaScript object, refer to typeahead docs for more info
                            matches.push({
                                value: str
                            });
                        }
                    });

                    cb(matches);
                };
            };
            var $e = $(element),
                options = valueAccessor();

            console.dir(options.source());

            console.dir($e);

            // passing in `null` for the `options` arguments will result in the default
            // options being used
            $e.typeahead({
                highlight: true,
                minLength: 2
            }, {
                source: substringMatcher(options.source())
            }).on('typeahead:selected', function (el, datum) {
                console.dir(datum);
            }).on('typeahead:autocompleted', function (el, datum) {
                console.dir(datum);
            });

        }
    };

---

您使用的是哪一版本的typeahead？从bootstrap 3开始，typeahead.js现在不是bootstrap的一部分，因此如果您使用twitter typeahead.js，则需要使用不同的自定义绑定。这还取决于您是否正在使用bloodhound.js。下面是一个使用《猎犬》的knockout.js和typeahead.js的工作示例——我使用的是Twitter的typeahead 0.10.2、knockout 3.1.0和Bootstrap 3.1.1。我不会使用bloodhound.js，因为我将使用我自己的建议引擎。我会看看你链接的答案。如果有办法建议以输入的前几个字符开头的项目，我会使用侦探犬。否则，我将使用我自己的建议函数在ko.observearray上开始搜索。我想我不需要打开valueAccessor。我还在学习自定义绑定是如何工作的，这非常有用。谢谢@CameronTinker没有引用我的话，但我非常确定

valueAccessor

的展开是针对淘汰2.x及以下版本的。从3.0及更高版本开始，您不再需要这样做了。我发现我忘记的主要事情是将源代码设置为对象数组而不是字符串数组。很高兴知道不需要在淘汰赛3.x中打开可观察到的东西。