Typeahead를 사용하는 Meteor : 입력 요소에서 typeahead()를 호출 할 위치는 어디입니까?

Question

Iron Router와 함께 Meteor를 사용하고 있습니다. 선입관 (이 버전 : https://github.com/bassjobsen/Bootstrap-3-Typeahead)을 사용할 수 없습니다. 여기

는 일부 코드이다 : 나는 응용 프로그램 레이아웃의 일부 헤더가

HomeController = RouteController.extend({ 
    //.... 
    after: function() { 
    var tags = this.getData().tags; 
    console.log(tags); 
    if(tags.length > 0) { 
     var tags = ['hello', 'world']; 
     console.log("Adding typeahead for tags to ", $('.input-search')[0]); 
     console.log("tags: ", tags); 
     $('.input-search').typeahead({ 
     source: tags, 
     updater: function(item) { 
      Router.go('/projects/tag/' + item); 
     } 
     }); 
    } 
    }, 

,이 같은 입력이 있습니다

<input type="text" class="form-control input-search" data-provide="typeahead" placeholder="Search"> 

을

의 jQuery를 한 후 : 함수가 입력을 취득하는 바르게. 그러나 입력에 대해 미리보기 호출을 사용하면 입력 오류를 올바르게 활성화하지 못하는 것처럼 보입니다. 입력을 입력 할 때 아무 일도 일어나지 않습니다.

그러나 내가 setTimeout에서 typeahead 호출을 감싸는 경우 작동합니다.

물론 setTimeouts에서 래핑을 시작할 때마다 뭔가 잘못되었습니다.

Iron Router를 사용할 때 /는 언제 형용사를 초기화 할 올바른 위치입니까?

Answer 1

템플릿의 rendered 기능에서 선행 기입을 초기화 할 수 있습니다. 예 :

Template.mytemplate.rendered = function() { 
     $('.input-search').typeahead({ 
     source: tags, 
     updater: function(item) { 
      Router.go('/projects/tag/' + item); 
     } 
     }); 
}; 

Answer 2

알아 냈습니다.

플러그인에서 사용하는 모든 입력이 Meteor에 의해 "유지"되었거나 다시 렌더링되지 않았는지 확인해야합니다. 가장 간단한 방법은 입력에 ID 속성이 있는지 확인하는 것입니다. 그래서 내 검색 입력 변경은 고정 :

<input type="text" id="input-search" class="form-control" data-provide="typeahead" placeholder="Search"> 

관련 문서 : 유성 1.0.3.1의로 http://docs.meteor.com/#template_preserve

Answer 3

철 : router@1.0.7 작업 솔루션은 다음과 같은 선행 입력 초기화 sergeyt:typeahead를 설치하는 것입니다 :

Template.MyTemplate.rendered = function() { 
    Meteor.typeahead.inject(); 
} 

초기화는 최상위 레벨 템플릿에 대해 한 번만 수행 할 수 있습니다.

Answer 4

나는 이것에 관한 기사를 썼다. 당신은 그것을 here으로 읽을 수있다.

요약하면 요소를 선택하고 변경하기 위해 javascript를 사용하여 구현하면 반응적인 환경에서 나쁜 습관이 생깁니다. 나는 그런 식으로 해봤지만 엄청난 고통이다. 내가 찾은 무엇

는

JS

Template.myHelper.helper({ 
    typeahead : function(){ 
    return JSON.stringify(Session.get("typeahead")); 
    } 
}); 

HTML

<template name="myTemplate"> 
    <input data-source="{{typeahead}}" data-provide="typeahead" id="blah" type="text" /> 
</template> 

당신의 선행 입력 데이터의 JSON 문자열을 반환하는 도우미를 만들고과 같이 데이터 소스 속성을 사용할 수 있다는 것입니다