W jaki sposób mogę uzyskać datepicker z twitter bootstrap do pracy z Meteor?

Question

Wolałbym raczej korzystać z implementacji Bootstrap w pakiecie Meteor, niż z mniejszej wersji plików, ale mam piekło czasu, aby uruchomić datepicker.

Wygląda na to, że są trzy wersje w różnych stanach, z których ostatnia jest kompilowana i gotowa do użycia.

http://www.eyecon.ro/bootstrap-datepicker/

https://github.com/eternicode/bootstrap-datepicker/

https://github.com/Aymkdn/Datepicker-for-Bootstrap

Wersja przez Aymkdn działa dobrze w zwykły waniliowy html ale nie podawane Meteor i mam czas helluva zastanawianie się dlaczego.

Chciałbym użyć tego Aymkdna z Meteorem, ale nie mogę go uruchomić. Myślę, że może to mieć związek z kolejnością ładowania js w Meteor lub renderingiem DOM. Wszelkie spostrzeżenia na temat tego, jak mogę to uruchomić?

Dzięki Steeve

Answer 1

Być może takie podejście nie było dostępne, gdy pierwotnie zamieszczono to pytanie, ale ja inicjuję datepicker po wyrenderowaniu jego szablonu.

Template.templateName.rendered = function() { 
    $('#datepicker').datepicker(); 
} 

Oto link do wydarzenia: http://docs.meteor.com/#template_rendered

Przy takim podejściu nie mam utrzymać właściwość sesji lub obsługi zdarzeń ostrości. Rozwiązanie Prashant nie działało dla mnie, gdy szablon został wyładowany i wrócił, ponieważ właściwość sesji została wyzwolona. Wystąpił również problem, w którym datapicker nie wyświetlał się po pierwszym ustawieniu ostrości.

Tak, datapicker zostanie zainicjowany za każdym razem, gdy szablon zostanie wyrenderowany, ale myślę, że to jest w porządku, ponieważ jestem prawie pewien, że zasoby szablonów są czyszczone podczas nawigacji między nimi.

Answer 2

Aby uzyskać datepicker do pracy, to jest to, co zrobiłem,

// At the beginning of the script 
Session.set("datepicker_unset", 1); 

Template.template_name.events = { 
    'focus #date-id' : function(event) { 
     if (Session.get("datepicker_unset")) { 
      $(event.target).datepicker(); 
      Session.set("datepicker_unset", 0); 
     } 
     // Anything else on #date-id focus? 
    }, 
    // Any other events here 
} 

Domyślam się, że używasz, $(document).ready() podejście. Zrobiłem też, a ponieważ to nie działa dla mnie, pomyślałem, że to będzie najlepsze rozwiązanie.

Mam nadzieję, że to działa również dla Ciebie!