기본 durandal 패키지 설정을 사용하는 SPA 응용 프로그램이 있습니다. Knockout, Jquery, Jquery UI를 사용 중이며 트위터 부트 스트랩을 사용하려고합니다. 내가 Creating a autocomplete field with Typeahead in the Durandal FrameworkDurandal SPA 응용 프로그램의 부트 스트랩 앞부분
내가 여기에 제공된 답변을 사용하고 사용자 지정 바인딩 녹아웃으로 선행 입력을 사용하려면 내 shell.html에이 HTML을 사용하여 기본 durandal 페이지 구축 (네비게이션 바)
<form class="navbar-search pull-right">
<input type="text" class="search-query" id="employeeSearch" placeholder="Search Employees" data-bind="typeahead: employees">
</form>
나는 그게 내 데이터 형 JSONP 사용하는 이유가 있도록 웹 서비스를 만들 백엔드에 낸시를 사용하고
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;
여기 내 연결 JS 파일에 내 자신의 데이터 소스를 생성. 나는 결과를 잘 되돌릴 수 있지만 페이지를로드 할 때 오류가 계속 발생합니다. "개체 [object Object]에는 페이지가로드가 완료되지 않는 크롬 디버거에서 'typeahead'메서드가 없습니다.
또한 knockout-bootstrap 라이브러리를 제거하면 페이지를 오류없이로드 할 수 있지만 검색 상자는 작동하지 않습니다. 또한 jQuery-> jQueryUI-> knockout-> bootstrap-> custom javascript와 같이 모든 라이브러리를 올바른 순서로 포함하도록했습니다. 대부분의 예제 중 대부분은 작동하는 것으로 보았지만이 문제를 해결할 수는 없습니다.
나는이 방법을 사용하여 시도했지만 SPA 프레임 워크 내에서 할 수 없었던
$('#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
내가 그들의 JS에서이 내용을 사용하여 본 대부분의 예제. 어떤 생각인지 알고 싶거나 더 많은 코드가 필요합니다. 감사합니다
당신은 몇 가지 점검 할 필요가 있습니다
합니까 부트 스트랩-typeahead.js 원래 bootstrap.js 충돌? bootstrap.js와 jqueryui.js의 충돌 문제가 이미 UI에 다른 jqueryui knockout bindingHandlers를 만들어 냈습니다. 주로 컨트롤을 올바르게 렌더링합니다. – jcc
예, 충돌합니다. http://getbootstrap.com/javascript/를 참조하십시오. – skewl84