Bootstrap typehead внутри приложения Durandal SPA

У меня есть приложение SPA, использующее настройку пакета durandal по умолчанию. Я использую Knockout, Jquery, Jquery ui и пытаюсь использовать тип начальной загрузки Twitter. Я строю страницы Durandal по умолчанию, используя этот html на моем shell.html(navbar)

<form class="navbar-search pull-right">
    <input type="text" class="search-query" id="employeeSearch" placeholder="Search Employees" data-bind="typeahead: employees">
</form>

Чтобы использовать typeahead в качестве пользовательской привязки нокаута, я использую ответы, представленные здесь Создание поля автозаполнения с помощью Typeahead в Durandal Framework

Я создаю свой собственный источник данных в моем подключенном файле js здесь

this.employees = function () {
    var self = this;
    $.ajax(app.url('/employees'),
    {
        contentType: 'application/json',
        dataType: 'jsonp',
        success: function (result) {
            self.employees = result;
        }
    });  
};

var shell = {
    router: router,
    employees: employees,
    activate: function () {
        return boot();
    }
};

return shell;

Я использую Нэнси на бэкэнде для создания веб-сервиса, поэтому я использую jsonp в качестве моего типа данных. Я могу вернуть свои результаты в порядке, однако при загрузке страницы я продолжаю получать сообщение об ошибке «Объект [object Object] не имеет метода« typeahead »» в отладчике Chrome, где страница никогда не завершает загрузку.

Кроме того, когда я удаляю библиотеку Knockout-Bootstrap, страница может загружаться без каких-либо ошибок, но окно поиска не работает. Я также убедился, что включаю все свои библиотеки в правильном порядке: jQuery->jQueryUI->knockout->bootstrap->custom javascript. Большинство примеров, которые я видел, работают, но я не могу уложить в голове эту проблему!

Большинство примеров, которые я видел, используют этот контент в своих js.

$('#employeeSearch').typeahead({
source: function (query, process) {

    return $.get(window.location.pathname +'?ajax=accounts&ajax_mode=search', { 'value': query }, function (data) {
        return process(data.result);
    });
},
minLength: 1,
items: 12
});  //A rough example

Я пытался использовать этот метод, но не смог в рамках SPA. Дайте мне знать любые мысли или требуется больше кода. Спасибо


person jcc    schedule 19.08.2013    source источник


Ответы (1)


Возможно, вам потребуется выполнить несколько проверок:

  1. Убедитесь, что вы вызываете/ссылаетесь на bootstrap-typeahead.js
  2. Убедитесь, что у вас есть не более одной ссылки на bootstrap-typeahead.js.
  3. Поскольку модули загружаются как AMD через requirejs, убедитесь, что в модуле, в котором вы используете функцию typeahead, есть следующее: требовать('скрипты/bootstrap-typeahead.js')
person skewl84    schedule 19.08.2013
comment
Конфликтует ли оригинальный bootstrap.js с bootstrap-typeahead.js? У меня уже были некоторые конфликтные проблемы с bootstrap.js и jqueryui.js, создающими некоторые другие обработчики привязки jqueryui Knockout BindingHandlers в пользовательском интерфейсе. В основном правильное отображение элементов управления. - person jcc; 20.08.2013