这是我的设置：

我正在尝试本教程：http://www.sitepoint.com/extending-html-aurelia-io-way/

我正在使用Aurelia的导航骨架，发布0.17.0

根据教程，我正在编写 popover.js 文件，并且做到了这一点：

bind() {
  // initialize the popover
  $(this.element).popover({ 
    title: this.title,
    placement: this.placement,
    content: this.content,
    trigger: 'hover' });
}

现在，我的问题是我的绑定--i.e。 this.title，this.placement，this.content - 即将出现。

我的假设是 - 由于某些原因 - 在这些属性受限之前，bind（）正在执行。

例如，当我运行以下代码时，我得到“null”。

bind() {
    console.log(this.title); //outputs "null"
}

如果我对属性进行硬编码，那么popover工作正常：

//This works great

bind() {
    $(this.element).popover({
        title: "Some Title",
        placement: "right",
        content: "Stuff I wrote",
        trigger: 'hover'
    });
}

所以肯定的是，bind（）行为正在发生。

是否有人遇到此问题，是否有简单的解决方案？

以下是我的其余代码：

这是我的文件 popover.js

import {customAttribute, bindable, inject} from 'aurelia-framework';
import $ from 'bootstrap';
import bootstrap from 'bootstrap';

@inject(Element)
@customAttribute('popover')
export class Popover {

    @bindable title;
    @bindable content;
    @bindable placement;

    constructor(element) {
        this.element = element;
    }

    //Lifecycle///////////////////////////////

    bind() {
        $(this.element).popover({
            title: this.title,
            placement: this.placement,
            content: this.content,
            trigger: 'hover'
        });

    }

    //Change Behaviors//////////////////////

    titleChanged(newValue) {
        $(this.element).data('bs.popover').options.title = newValue;
    }

    contentChanged(newValue) {
        $(this.element).data('bs.popover').options.content = newValue;
    }

    placementChanged(newValue) {
        $(this.element).data('bs.popover').options.placement = newValue;
    }

}

这是我的文件 funny.html ：

<template>
    <require from="./popover"></require>

    <h1>${greeting}</h1>
    <ul class="list-group">
        <li class="list-group-item" repeat.for="p of posts">
            <img src.bind="p.data.thumbnail" popover="
                placement: 'right',
                title.bind = p.data.title,
                content.bind = p.data.content
            "/>
            <a href="http://reddit.com/${p.data.permalink}">
                ${p.data.title}
            </a>
        </li>
    </ul>
</template>

现在......我知道你在想什么。如果你将我的funny.html代码与教程的比较，你会注意到我使用逗号 - 而不是分号 - 来分隔popover属性的属性：

//I am using commas, not semicolons...
<img src.bind="p.data.thumbnail" popover="
    placement: 'right',
    title.bind = p.data.title,
    content.bind = p.data.content
"/>

呵呵，自然你会想知道为什么我这样做了，所以我会告诉你原因。

最初，当我按照教程规定使用分号时，我遇到了一个令人讨厌的错误：

//Using semicolons causes an error...
<img src.bind="p.data.thumbnail" popover="
    placement: 'right';
    title.bind = p.data.title;
    content.bind = p.data.content
"/>

//Causes this nasty error on the Javascript Console:

//ERROR [app-router] TypeError: Cannot read property 'split' of null
//at TemplatingBindingLanguage.inspectAttribute

所以这就是为什么我选择使用逗号而不是分号，因为我不希望看到这个错误弹出。（我使用逗号可能会导致bind（）行为无法解决问题 - 虽然这不太可能，因为我试图只绑定一个属性 - 避免使用逗号/分号 - 而bind（）行为会仍然没有用。）

有谁能告诉我为什么会出现这个错误，意味着什么，或者我如何向前推进？

错误[app-router] TypeError：无法读取null的属性'split' 在TemplatingBindingLanguage.inspectAttribute

非常感谢，

-Andy

Answer 1

更新：

嘿 - 问题解决了。

来自aurelia gitter（https://gitter.im/Aurelia/Discuss）的

Donald Slagle 注意到我正在使用＆＃34; =＆＃34;而不是＆＃34;：＆＃34;关于 funny.html 文件的属性绑定。

现在它有效。感谢

Aurelia customAttribute（popover） - bind（）行为不起作用

这是我的设置：

1 个答案: