無法觀察Aurelia自定義屬性中的引導事件

Question

我正在努力將名爲FullCalendar的JavaScript事件日曆合併到Aurelia應用中。我有一個名爲dashboard的標準Aurelia模塊，並將日曆實施放入一個名爲calendar.js的單獨.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不存在，直到單擊該選項卡，導致webpack抱怨，但不會使應用程序崩潰。我一直無法使用if聲明來捕捉這一點，我不知道爲什麼。

其次，當點擊選項卡時，即使的calvisible值顯示true在calendar.js文件，它不會觸發更改事件，我可以觀察那裏，而這正是我需要火.render方法繪製日曆。我在這裏嘗試過使用@observable，但無法使其正常工作。什麼是正確的方法？

解決方案 -

這是基於@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

對不起，無法發表評論。（答案與之前的法比奧盧斯的答案相同，只是有一點關於您輸入錯誤的額外信息）

您的代碼中有錯字嗎？我看到你的view要綁定到calVisible但它calvisible在viewModel如果是這樣，像這樣做

@bindable calVisible; // this was calvisible 

在此之後，你可以簡單地做你的視圖模型：

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

    } 
}