0

기본 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에서이 내용을 사용하여 본 대부분의 예제. 어떤 생각인지 알고 싶거나 더 많은 코드가 필요합니다. 감사합니다

당신은 몇 가지 점검 할 필요가 있습니다

답변

0

:

  1. 당신이-typeahead.js 부트 스트랩 할 하나 이상의 참조가 없는지 확인 부트 스트랩-typeahead.js를 참조/호출되어 있는지 확인을
  2. 모듈이 requirejs를 통해 AMD로로드되기 때문에, 예를 들어 선행 기입 기능을 사용하는 모듈에 다음이 있는지 확인하십시오. 는 ('스크립트/부트 스트랩 - typeahead.js')를 필요로
+0

합니까 부트 스트랩-typeahead.js 원래 bootstrap.js 충돌? bootstrap.js와 jqueryui.js의 충돌 문제가 이미 UI에 다른 jqueryui knockout bindingHandlers를 만들어 냈습니다. 주로 컨트롤을 올바르게 렌더링합니다. – jcc

+0

예, 충돌합니다. http://getbootstrap.com/javascript/를 참조하십시오. – skewl84

관련 문제