Aurelia绑定到滑块

我在尝试找出正确的方式来绑定我滑出的滑动条中的值时遇到了一些麻烦。Aurelia绑定到滑块

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

来源

2016-07-18 allencoded

使用containerless属性很可能会为您涂胶。如果您停止使用它，则可以简单地使用事件绑定将自定义元素的事件绑定到您的父虚拟机上的一个设置例如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自定义元素，那么你就需要触发点击事件作为一个自定义事件（你最终会得到一个容器元素，反正它只是一个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>

来源

2016-07-18 21:57:42

Aurelia绑定到滑块

回答

相关问题