从嵌套的 HTML 元素中访问 Aurelia 自定义属性函数

Question

我有一个视图/视图模型对，它实现了弹出框自定义属性。我的具体目标包括在弹出框本身内单击按钮以及单击页面上的其他任何位置时关闭弹出框。

我可以让我的 doSomething() VM 函数在视图中的元素级别上工作，但不能在包含元素的属性内工作。我已经在代码 cmets 中进一步解释了这个问题。我会很感激一些指导。谢谢！

blog.html

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

...

<!-- doSomething() works here! -->
<button type='button' click.trigger='doSomething()'>ClickMe</button>

<!-- doSomething() does not work here! -->
<!-- `click.trigger`/`click.delegate` does not trigger anything, while `onclick` shows
     "Uncaught ReferenceError: doSomething is not defined" -->
<span class="glyphicon glyphicon-star" popover="title.bind: blogpost.title; placement.bind: 'top'" 
data-content='<button type="button" click.trigger="doSomething()">ClickMe</button>' ></span>

...
</template>

blog.ts

... 
doSomething() {
    console.log('doing something');
}

popover.ts

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

Answer 1

我最近遇到了同样的问题。我目前正在为 Aurelia 开发一个 Bootstrap 端口，它还没有完成，我还没有写任何文档，但是弹出框已经实现了。

非常欢迎您来看看： https://github.com/tochoromero/aurelia-bootstrap/tree/master/src/popover

您尝试实现弹出框的方式将非常复杂（如果可能的话），范围会变得混乱。如果您只有文本，那很好，但您基本上希望能够将任何内容放入弹出框并将其绑定到正确的 View-Model。

我解决这个问题的方法是使用几个自定义元素来表示弹出框，我有 AubsCustomPopover、AubsPopoverTitle 和 AubsPopoverContent。 使用这 3 个自定义元素，您将为弹出框创建引导标记，并且因为您将它们直接添加到视图中，它们将具有正确的视图模型，您可以在其中做任何您想做的事情。

然后，有一个自定义属性，这就是 AubsPopover，它负责根据您指定的触发操作（悬停、单击、聚焦、外部单击）显示和隐藏自定义属性。

使用它的代码如下所示：

<aubs-custom-popover model.bind="customPopover">
  <aubs-popover-title>
     This is my awesome title <i class="fa fa-star"></i>
  </aubs-popover-title>
  <aubs-popover-content>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" text.bind="password"   
             placeholder="Password">
    </div>

    <button class="btn btn-default" click.delegate="isOpen = false">
      Close
    </button>
  </aubs-popover-content>
</aubs-custom-popover>

<button class="btn btn-primary" 
     aubs-popover="custom-model.bind: customPopover; 
                   trigger: outsideClick; 
                   position: bottom;   
                   open.bind:isOpen">
     Custom Popover
</button>

正如我所说的那样，Popover 已经完全实现，但我还没有编写任何文档，在我这样做之前我希望有更多的组件。

如果你想使用它，我可以帮你设置它。