Durandal SPA应用程序内的Bootstrap typeahead

时间:2013-08-19 20:54:48

标签: jquery twitter-bootstrap knockout.js durandal bootstrap-typeahead

我有一个SPA应用程序使用默认的durandal软件包设置。我正在使用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作为自定义淘汰赛绑定,我使用此处提供的答案Creating a autocomplete field with Typeahead in the 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;

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

此外,当我删除knockout-bootstrap库时,页面可以加载而没有任何错误,但搜索框不起作用。我还确保我按正确顺序包含所有库,jQuery-&gt; jQueryUI-&gt; knockout-&gt; bootstrap-&gt;自定义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框架内使用。让我知道任何想法或需要更多的代码。感谢

1 个答案:

答案 0 :(得分:0)

您可能需要进行一些检查:

  1. 确保您正在调用/引用bootstrap-typeahead.js
  2. 确保您对bootstrap-typeahead.js
  3. 的引用不超过一个
  4. 由于模块是通过requirejs加载为AMD的,因此请确保您在使用预先输入功能的模块中具有以下功能: 的要求( '脚本/自举-typeahead.js')