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綁定到滑塊

回答

相關問題