Невозможно наблюдать событие Bootstrap в пользовательском атрибуте Aurelia

Question

Я работаю над включением календаря событий JavaScript с именем FullCalendar в приложение Aurelia. У меня есть стандартный модуль Aurelia, который называется dashboard, и поместил реализацию календаря в отдельный файл .js с именем calendar.js и создал пользовательский атрибут calendar. Я использую настраиваемый атрибут, потому что нет прикрепленного изображения calendar, все генерируется в JavaScript.

Поскольку календарь не отображается, когда страница загружается (поскольку она не находится на основной или активной вкладке), она не рисуется, когда метод attached() запускается в коде пользовательского атрибута. Мне нужно иметь возможность наблюдать событие Bootstrap (щелчок на вкладке) из пользовательского атрибута, чтобы запустить метод .render для рисования календаря, когда в итоге будет нажата вкладка.

Вот соответствующие фрагменты моего кода:

dashboard.html:

<!-- Standard Bootstrap tabs --> 
<ul class="nav nav-tabs" role="tablist"> 
        <li role="presentation" class="active"><a href="#tab1" role="tab" data-toggle="tab">Projects</a></li> 
        <li role="presentation"><a href="#tab2" role="tab" data-toggle="tab" id="calselect">Calendar</a></li> 
        ... 
        ... 
<!-- and further down the same page, the tab panes with their content --> 
<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="tab1"> 
     <!-- Table content here... --> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="tab2"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="panel panel-white"> 
        <div class="panel-body"> 
         <div calendar calvisible.bind="calVisible"></div> 
        </div> 
       </div> 
      </div> 
     </div><!-- Row --> 
    </div> 
</div> 

dashboard.js:

... 
    constructor(http, dataRepository) { 
    this.http = http; 
    dataRepository.getProjects().then(projects => this.projects = projects); 
    this.calVisible = false; 
    }; 
... 
    attached(){ 
    var cal = document.getElementById('calselect'); 
     $(cal).on('shown.bs.tab', (e) => { 
     this.calVisible = true; 
     }); 
    }; 

calendar.js:

@bindable calvisible; 

Bootstrap запускает событие под названием 'shown.bs.tab' при нажатии на вкладку. На правильную вкладку ссылаются id="calselect". При нажатии на вкладку связанное свойство this.calVisible имеет значение true. Впоследствии calvisible связан с файлом calendar.js.

Есть две проблемы, которые я могу определить. Во-первых, с точки зрения calendar.js, calvisible не существует, пока не будет нажата вкладка, в результате чего веб-пакет будет жаловаться, но не сбой приложения. Я не смог поймать это, используя заявление if, и я не уверен, почему.

Во-вторых, когда язычок нажата, даже если значение calvisible показывает true в файле calendar.js, он не вызывает событие изменения, которые я могу наблюдать там, и это то, что мне нужно сгореть .render метод для нарисовать календарь. Я попытался использовать @observable здесь, но не смог заставить его работать. Каков правильный подход?

Solution -

Вот выигрышный код, основанный на @Fabio Лузах ответить ниже:

bind(){ 
    this.calvisible = this.calvisible; 
} 

calvisibleChanged(){ 
    $(this.element).fullCalendar('render'); 
} 

Answer 1

В этой ситуации, я думаю, вы должны использовать пользовательский-элемент вместо пользовательского атрибута. Для решения проблемы отсутствия вид, Aurelia предоставляет вам @noView декоратор, see the docs. Ваш код будет выглядеть примерно так:

import {noView} from 'aurelia-framework'; 

@noView 
export class Calendar { 
    @bindable calvisible; 

    bind() { 
    //do your js magic here 
    } 

    calvisibleChanged() { 
    } 
} 

Возможно, вы все еще можете получить некоторые проблемы с js. Обновите свой код, посмотрите, что произойдет, расскажите, что происходит, и я постараюсь вам помочь.

Answer 2

Извините, не комментировать.(Ответ аналогичен предыдущему от Fabio Luz, за исключением немного дополнительной информации о вашей опечатке)

У вас есть опечатка в коде? Я вижу в вашем view вы являются обязательными для calVisible но calvisible в viewModel Если да, то это, как этот

@bindable calVisible; // this was calvisible 

После этого, вы можете просто сделать в вашей ViewModel:

// Note that this will be called after the value changed 
calVisibleChanged(newValue) { 
    if (newValue) { 
     // Do something when cal is shown 
    } else { 

    } 
}