Aureliaスライドバーへのバインド

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イベントを親VMの関数にバインドするだけです。 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イベントを発射する必要があります（とにかくそれはちょうどdivまたは何かになるだろう）コンテナ要素を持つことになります。ここではこの動作を示し要旨は次のとおりです。https://gist.run/?id=eb9ea1612c97af91104a35b0b5b10430

要素VM

​​

要素テンプレート

<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>