Question

我有一个View / View-Model对，它实现了一个popover自定义属性。我的具体目标包括在弹出窗口中单击按钮时解除弹出窗口，以及单击页面上的任何其他位置。

我可以让我的doSomething（）VM函数在视图中的元素级别上工作，但不能在包含元素的属性中工作。我在代码评论中进一步解释了这个问题。我很欣赏一些指导。谢谢！

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端口，它尚未完成，我还没有编写任何文档，但是popover已经实现了。

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

你试图实现popover的方式将非常复杂（如果可能的话），事情会变得混乱。如果你只有文本那么它会没问题，但是你基本上希望能够在popover中放置任何东西并将它绑定到正确的View-Model。

我解决这个问题的方法是使用几个代表popover的自定义元素，我有AubsCustomPopover，AubsPopoverTitle和AubsPopoverContent。使用这3个自定义元素，您将为popover创建引导标记，并且因为您将直接在视图中添加它们，所以它们将具有正确的View-Model，您可以在其中执行任何操作。

然后，有一个自定义属性，这是AubsPopover，这是负责显示和隐藏自定义属性的属性，具体取决于您指定的触发器操作（悬停，单击，焦点，外部点击）。 / p>

使用它的代码看起来像这样：

<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已经完全实现，但我还没有编写任何文档，我想在此之前有更多的组件。

如果你想使用它，我可以给你一些帮助来设置它。

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

1 个答案: