Question

我正在尝试使用Bootstrap 3获取typeahead jQuery的knockout-bootstrap自定义绑定，以便我可以将它与Durandal 2.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);
    }
};

从Bootstrap 3开始，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-bootstrap示例HTML简化为仅演示typeahead绑定。我遇到的问题是，当typeahead尝试提供建议时，它会在1184行中出现Uncaught TypeError: object is not a function异常。我试图为此创建一个jsFiddle，但目前它不起作用。

我缺少什么来获得Twitter类型0.10.2 jQuery，knockout 3.1.0，Bootstrap 3.1.1和Durandal 2.0？

Answer 1

Here is an updated, working version of your fiddle.。我所做的就是使用substringMatcher函数，并将jsFrameworks数组作为预先输入的源代码 - exactly how it is used in the typeahead.js first example。

因此，当您启动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);
            });

        }
    };

Twitter Typeahead，Knockout JS和Twitter Bootstrap 3打得不好

1 个答案: