我有一个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框架内使用。让我知道任何想法或需要更多的代码。感谢
答案 0 :(得分:0)
您可能需要进行一些检查: