Aurelia Binding to slide bar

Question

Ich habe Probleme, den richtigen Weg zu finden, um einen Wert in meiner Slidebar zu binden, der herausgleitet.

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> 

Sie sehen, wo Ereignis-Element geschlungen wird. Es erzeugt mehrere Karten und wenn ein Benutzer auf diese Karten klickt, erhält er eine Gleitleiste (event-builder-slidebar), die sich von links einschiebt und dem Benutzer erlaubt, Informationen auf der Karte zu bearbeiten. Ich bin momentan ratlos für die richtige Vorgehensweise. Ich schätze, ich würde das Ereignis benötigen, das die Slidebar auslöst, um das aktuelle Datenobjekt wieder an die übergeordnete event.html und an die event-builder-slidebar übergeben. Da bin ich ratlos, um herauszufinden, wie es geht.

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

Mit der containerless Attribut ist wahrscheinlich gumming Dinge für Sie. Wenn Sie das nicht mehr verwenden, können Sie einfach die Ereignisbindung verwenden, um das Ereignis click des benutzerdefinierten Elements an eine Funktion auf Ihrer übergeordneten VM zu binden, die z. selectedEvent Eigentum. Sie können es auch ohne VM-Funktion gesetzt direkt in der Vorlage wie folgt aus:

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

Wenn Sie jedoch wirklich containerless benutzerdefinierte Elemente verwenden möchten, dann müssen Sie das Click-Ereignis als benutzerdefinierte Ereignis ausgelöst (und du wirst am Ende ein Container-Element haben, egal, es wird nur ein Div oder etwas sein. Hier ist ein Kern, der diese in Aktion zeigt: https://gist.run/?id=eb9ea1612c97af91104a35b0b5b10430

Element 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); 
    } 
} 

Element Vorlage

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