Twitter bootstrap 无法在Aurelia自定义属性中观察引导事件

我正在将一个JavaScript事件日历合并到Aurelia应用程序中。我有一个名为

dashboard

的标准Aurelia模块，将日历实现放在一个名为

calendar.js

的单独的

文件中，并创建了一个名为
calendar
的自定义属性。我之所以使用自定义属性，是因为没有附加的
calendar
视图，所有内容都是用JavaScript生成的

由于加载页面时日历不可见（因为它不在主选项卡或活动选项卡上），因此在自定义属性代码中激发
attached（）
方法时，日历不会被绘制。我需要能够从自定义属性观察引导事件（单击选项卡），以便在最终单击选项卡时触发
.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>

calendar.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;
      });
  };

 @bindable calvisible;

当单击选项卡时，引导程序将触发一个名为“show.bs.tab”

的事件。正确的选项卡由

id=“calselect”

引用。单击选项卡时，绑定属性this.calVisible设置为true。随后，

calvisible

被绑定到

calendar.js

文件

我可以找出两个问题。首先，从

calendar.js

的角度来看，

calvisible

在单击选项卡之前不存在，导致webpack抱怨，但不会使应用程序崩溃。我无法用

if

语句捕捉到这一点，我不知道为什么

其次，单击选项卡时，即使

calvisible

的值在

calendar.js

文件中显示

true

，它也不会触发我可以在那里观察到的更改事件，这就是我需要触发

.render

方法来绘制日历的原因。我曾尝试在这里使用

@observable

，但也无法让它工作。正确的方法是什么

溶液-

以下是基于@Fabio Luz答案的获奖代码：

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

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

---

在这种情况下，我认为应该使用自定义元素而不是自定义属性。为了解决缺少视图的问题，Aurelia为您提供了

@noView

装饰器。您的代码如下所示：

import {noView} from 'aurelia-framework';

@noView
export class Calendar {
   @bindable calvisible;

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

   calvisibleChanged() {
   }
}

您可能仍然会遇到一些js问题。更新您的代码，看看发生了什么，告诉我发生了什么，我会尽力帮助您。

抱歉，无法发表评论。（答案与法比奥·卢兹（Fabio Luz）的前一个答案相同，只是关于你的打字错误有一点额外的说明）

你的密码有错吗？我在您的

视图

中看到您正在绑定到

calVisible

，但它在

viewModel

中是

calVisible

，如果是这样，请这样做

@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 {

    }
}

---

嗨，法比奥，这就成功了。我修改了原来的问题，加入了工作守则。谢谢不是打字错误。JS文件中的名称是camelcased，模板中的名称（绑定版本）都是小写。