Как использовать вычисленные свойства для формирования даты с sla sh или da sh? - PullRequest
Новая
       49

Как использовать вычисленные свойства для формирования даты с sla sh или da sh?

0 голосов
/ 28 января 2020

В форме редактирования есть два выпадающих списка, которые позволяют пользователю выбрать data separator и date format.

Я объявил данные как для разделителя даты, так и для формата даты в route.js. 

  dataDateFormat = {
    dateSeparator:"-",
    dateFormat:"YYYY-MM-DD"
  };

Вот код для date separator параметров. 

{{#paper-select options=this.dateSeparator
  selected=model.dataDateFormat.dateSeparator
  onchange=(action (mut model.dataDateFormat.dateSeparator)) as |dateSep| }}
    {{dateSep}}
  {{/paper-select}}

Вот код для date format параметров. 

{{#paper-select options=this.fullDate
  selected=model.dataDateFormat.dateFormat
  onchange=(action (mut model.dataDateFormat.dateFormat)) as |date| }}
    {{date}}
{{/paper-select}}

В controller.js я объявил вычисляемое свойство fullDate, которое я хочу вернуть формату даты с разделителем даты, выбранным пользователем. Например, когда пользователь выбирает - в качестве разделителя даты, параметр формата даты будет изменен на основе разделителя даты, YYYY-MM-DD, DD-MM-YYYY and MM-DD-YYYY. Так, как я могу сделать это, используя вычисляемые свойства? 

@computed('model.dataDateFormat')
  get fullDate() {
    return `${this.model.dataDateFormat.dateSeparator} ${this.model.dataDateFormat.dateFormat}`;
  }

init() {
  dateSeparator: [
    "-","/"
  ],
 dateFormat:[
    "YYYY MM DD",
    "DD MM YYYY",
    "MM DD YYYY"
  ],
}

1 Ответ

0 голосов
/ 28 января 2020

Прежде всего, должна быть ошибка. ваш init неверный синтаксис.

Далее я думаю, что важным шагом здесь является то, что вы, вероятно, должны сохранять формат независимым от разделителя. И просто объединить оба для форматирования. Так что, может быть, что-то вроде { first: 'DD', middle: 'MM', last: 'YYYY' }. Тогда вам вообще не понадобится вычисление.

Это может выглядеть так: 

class MyController extends Controller {
  dateSeparators = Object.freeze([
    "-",
    "/",
  ]);
  dateFormats = Object.freeze([
    { first: 'YYYY', middle: 'MM', last: 'DD' },
    { first: 'DD', middle: 'MM', last: 'YYYY' },
    { first: 'MM', middle: 'DD', last: 'YYYY' },
  ]);
}

Не просто объединить это в шаблоне: 

{{#paper-select options=this.dateFormats
  selected=model.dataDateFormat.dateFormat
  onchange=(action (mut model.dataDateFormat.dateFormat)) as |format| }}
    {{format.first}}{{model.dataDateFormat.dateSeparator}}{{format.middle}}{{model.dataDateFormat.dateSeparator}}{{model.last}}
{{/paper-select}}

Теперь причина, по которой вычисляемое свойство на этом уровне не будет работать, состоит в том, что вам понадобится внутри {{#paper-select, а там несколько раз .

Однако если Вы хотите, чтобы вы могли написать компонент. Тогда у вас мог бы быть этот контроллер: 

class MyController extends Controller {
  dateSeparators = Object.freeze([
    "-",
    "/",
  ]);
  dateFormats = Object.freeze([
    ['YYYY', 'MM', 'DD'],
    ['DD', 'MM', 'YYYY'],
    ['MM', 'DD', 'YYYY'],
  ]);
}

теперь нет простого способа получить доступ к 3 элементам этого массива в hbs (пользовательский помощник мог бы решить эту проблему, но сейчас мы ищем компонентное решение ),

Таким образом, вы можете сделать это: 

{{#paper-select options=this.dateFormats
  selected=model.dataDateFormat.dateFormat
  onchange=(action (mut model.dataDateFormat.dateFormat)) as |format| }}
    <DateFormat
      @format={{format}}
      @seperator={{this.model.dataDateFormat.dateSeparator}}
    />
{{/paper-select}}

Нет внутри компонента DateFormat вы можете иметь computed: 

class DateFormatComponent extends Component { // this is a classic component, not a glimmer component
  @computed('format', 'seperator') formatWithSeperator() {
    return this.format.join(this.seperator);
  }
}

И затем шаблон может быть просто {{formatWithSeperator}}

Краткое замечание: обратите внимание, что изменен параметр с единственного числа dateFormat на множественное число dateFormats. всегда хорошая идея использовать множественное число для массивов, чтобы сделать его более понятным.

...