Question

我正在努力将名为FullCalendar的JavaScript事件日历合并到Aurelia应用中。我有一个名为dashboard的标准Aurelia模块，它已将日历实现放入一个名为.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在单击选项卡之前不存在，导致webpack投诉但不会使应用程序崩溃。我使用if声明无法理解这一点，我不确定原因。

其次，当单击选项卡时，即使calvisible的值显示true文件中的calendar.js，它也不会触发我可以在那里观察到的更改事件，并且这就是我需要触发.render方法来绘制日历。我试图在这里使用@observable，但也无法让它工作。什么是正确的方法？

解决方案 -

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

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如果是这样的话，就这样做

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

    }
}

在此之后，您只需在viewModel中执行：

IDWriteFontFile::Analyze()

无法在Aurelia自定义属性中观察Bootstrap事件

2 个答案: