0

我有一个使用默认 durandal 包设置的 SPA 应用程序。我正在使用 Knockout、Jquery、Jquery ui，并尝试使用 twitter bootstrap typeahead。我在我的 shell.html(navbar) 上使用这个 html 在默认的 durandal 页面上构建

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

为了将 typeahead 用作自定义敲除绑定，我使用此处提供的答案在 Durandal 框架中使用 Typeahead 创建自动完成字段

我在这里连接的 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;

我在后端使用 Nancy 来创建 Web 服务，这就是使用 jsonp 作为我的数据类型的原因。我能够很好地恢复我的结果，但是在加载页面时，我在页面永远不会完成加载的 chrome 调试器中不断收到错误“对象 [对象对象] 没有方法 'typeahead'”。

此外，当我删除了 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 框架内使用。让我知道任何想法或需要更多代码。谢谢

4

1 回答 1

0

您可能需要做一些检查：

  1. 确保您正在调用/引用 bootstrap-typeahead.js
  2. 确保您对 bootstrap-typeahead.js 的引用不超过一个
  3. 因为模块是通过 requirejs 加载为 AMD 的，所以请确保您在使用 typeahead 功能的模块中有以下内容，例如 require('scripts/bootstrap-typeahead.js')
于 2013-08-19T23:51:46.017 回答