Как динамически изменить шаблон в aurelia/щелкнуть, чтобы отредактировать строку таблицы?

С помощью Knockout я мог динамически изменять шаблон строки таблицы, чтобы при нажатии на нее строка становилась редактируемой с использованием шаблона редактирования. Никакой навигации, никакой маршрутизации, просто назначение строки нового шаблона. Как это сделать в аурелии?


javascript aurelia
person John Little    schedule 05.08.2015    source источник
comment
Должен быть интерактивным, когда пользователь нажимает на строку. Я предполагаю что-то вроде click.trigger=$parent.toggleTemplate(item)   -  person John Little    schedule 05.08.2015
comment
Ответ Джереми как всегда идеален. Я написал здесь блог о расширенных шаблонах таблиц на случай, если вы захотите пойти дальше. davismj.me/blog/advanced-tables.   -  person Matthew James Davis    schedule 22.02.2017
comment
Пошел с ‹table› ‹tr repeat.for=r из ['A','B','A','B'] as-element=compose view='./template_${r}.html'› ‹ /стол>   -  person John Little    schedule 19.04.2018

Ответы (2)


arrow_upward
11
arrow_downward

Вот как это можно сделать с помощью команды привязки if:

https://gist.run/?id=2408b065ecfac30ff2b1034ea8da800d

скриншот

Код:

app.js

export class App {
  editing = null;
  
  planets = [
    { name: 'Mercury', diameter: 3032, distance: 35983610 },
    { name: 'Venus', diameter: 7521, distance: 67232360 },
    { name: 'Earth', diameter: 7926, distance: 92957100 },
    { name: 'Mars', diameter: 4222, distance: 141635300 },
    { name: 'Jupiter', diameter: 88846, distance: 483632000 },
    { name: 'Saturn', diameter: 74898, distance: 888188000 },
    { name: 'Uranus', diameter: 31763, distance: 1783950000 },
    { name: 'Neptune', diameter: 30778, distance: 2798842000 }];
  
  edit(planet) {
    this.editing = planet;
  }
}

app.html

<template>
  <table>
    <thead>
      <tr>
        <td>Planet</td>
        <td>Diameter (mi)</td>
        <td>Distance to Sun (mi)</td>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="planet of planets" click.delegate="edit(planet)">
        <!-- read-only mode -->
        <td if.bind="editing !== planet">${planet.name}</td>
        <td if.bind="editing !== planet">${planet.diameter}</td>
        <td if.bind="editing !== planet">${planet.distance}</td>
        
        <!-- edit-mode -->
        <td if.bind="editing === planet"><input value.bind="planet.name" type="text"></td>
        <td if.bind="editing === planet"><input value.bind="planet.diameter" type="number"></td>
        <td if.bind="editing === planet"><input value.bind="planet.distance" type="number"></td>
      </tr>
    </tbody>
  </table>
</template>

CSS:

thead {
  font-weight: bold;
}

tbody > tr > td {
  cursor: pointer;
}
person Jeremy Danyow    schedule 05.08.2015
comment
бедного Плутона выгнали :( - person Mike Graham; 06.08.2015
comment
Пытался решить это сам, но это решение намного чище. Благодарю вас! - person Hardycore; 10.04.2019

arrow_upward
3
arrow_downward

вы можете использовать стратегию представления для динамического выбора представления для модели представления.

http://aurelia.io/docs.html#compose — прокрутите вниз до раздела о представлении стратегия

Что, если вы хотите определить представление динамически на основе данных? или условия выполнения? Вы также можете сделать это, реализовав метод getViewStrategy() в вашей модели представления. Он может возвращать относительный путь к представлению или экземпляру ViewStrategy для пользовательского режима загрузки представления. Приятно то, что этот метод выполняется после обратного вызова активации, поэтому у вас есть доступ к данным модели при определении представления.

person Mike Graham    schedule 05.08.2015