Question

我在尝试找出滑动滑块的值的正确方法时遇到了一些麻烦。

Event.html：

<template>

  <require from="./sidebar/event-builder-sidebar"></require>
  <require from="./event-item"></require>

  <div class="flex-row">
      <aside class="event-builder-settings-panel">
          <!-- need to bind the single clicked task back to this -->
          <event-builder-sidebar containerless data.two-way="?"></event-builder-sidebar>
      </aside>
      <div class="content-panel">
          <div class="eb-actions-row row-flip">
              <div class="action-row-buttons">
                  <button type="button" class="btn btn-sm btn-default"><i class="icon-ion-ios-book"></i> Task Library</button>
                  <button type="button" class="btn btn-sm btn-default"><i class="icon-ion-plus"></i> Add Task</button>
              </div>
          </div>
          <section class="outer-content outer-content-spacing">
              <div class="inner-content-div inner-content-padding">
                  <ul class="eb event-list">
<!-- Loop happens here -->
                      <li class="event-item eb-item-created" repeat.for="t of tasks">
                        <event-item containerless data.two-way="t"></event-item>
                      </li>
                  </ul>
              </div>
          </section>
      </div>
  </div>
</template>

您可以看到循环事件项目的位置。它会生成多张卡片，当用户点击这些卡片时，他们会获得一张从左侧滑入的滑块（event-builder-slidebar），并允许用户编辑卡片中的信息。我目前正在以正确的方式做到这一点。我猜我需要触发滑动条的事件才能将当前数据对象传递回父event.html和event-builder-slidebar。这是我无法弄清楚如何做的地方。

import { bindable, bindingMode } from 'aurelia-framework';
import { CssHelper } from '../../../shared/css-helper';

export class EventItem {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) data;

  static inject() {
    return [CssHelper];
  }

  constructor(cssHelper) {
    this.cssHelper = cssHelper;
    this.toggleEdit = e => { this.edit(e); };
  }

  attached() {
    document.addEventListener('click', this.toggleEdit);
  }



  edit(e) {
      // this needs to pass this.data back to event builder sidebar somehow
  }
}

Answer 1

使用containerless属性可能会让您感到困惑。如果你停止使用它，你可以简单地使用事件绑定将自定义元素的click事件绑定到父虚拟机上的一个函数，该函数设置一个，例如， selectedEvent财产。您甚至可以直接在模板中设置它而无需VM功能，如下所示：

<template>
  <require from="./sidebar/event-builder-sidebar"></require>
  <require from="./event-item"></require>

  <div class="flex-row">
      <aside class="event-builder-settings-panel">
          <!-- bind the single clicked task back to this -->
          <event-builder-sidebar containerless data.bind="selectedEvent"></event-builder-sidebar>
      </aside>
      <div class="content-panel">
          <div class="eb-actions-row row-flip">
              <div class="action-row-buttons">
                  <button type="button" class="btn btn-sm btn-default"><i class="icon-ion-ios-book"></i> Task Library</button>
                  <button type="button" class="btn btn-sm btn-default"><i class="icon-ion-plus"></i> Add Task</button>
              </div>
          </div>
          <section class="outer-content outer-content-spacing">
              <div class="inner-content-div inner-content-padding">
                  <ul class="eb event-list">
<!-- Loop happens here -->
                      <li class="event-item eb-item-created" repeat.for="t of tasks">
                        <event-item data.bind="t" click.delegate="selectedEvent = t" ></event-item>
                      </li>
                  </ul>
              </div>
          </section>
      </div>
  </div>
</template>

但是，如果您真的想要使用containerless个自定义元素，那么您需要将click事件作为自定义事件触发（并且您最终会拥有一个容器元素&& ＃39;我只是一个div或者什么东西）。以下是显示此操作的要点：https://gist.run/?id=eb9ea1612c97af91104a35b0b5b10430

元素vm

import {inject, bindable, containerless} from 'aurelia-framework';

@containerless
@inject(Element)
export class Thing {
  @bindable value;

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

  fireClick() {
    let e = new CustomEvent('click', { bubbles: true });

    this.element.dispatchEvent(e);
  }
}

元素模板

<template>
  <div click.delegate="fireClick()" style="border: solid red 1px; height: 30px; width: 40px; display: inline-block; margin: 10px; text-align: center;">
    ${value}
  </div>
</template>

Aurelia绑定到滑动条

1 个答案: