如何使用计算属性用斜线或破折号形成日期？答案

【问题标题】：How to use computed properties to form date with slash or dash?如何使用计算属性用斜线或破折号形成日期？
【发布时间】：2020-05-13 10:48:24
【问题描述】：

在编辑表单中，有两个下拉选择允许用户选择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"
  ],
}

【问题讨论】：

标签： ember.js computed-properties

【解决方案1】：

首先，一定有错误。您的 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'],
  ]);
}

现在没有简单的方法可以在 hbs 中访问该数组的 3 个元素（自定义帮助程序可以解决这个问题，但我们现在正在研究组件解决方案），

所以你可以这样做：

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

简短通知：请注意，a 将选项从单数 dateFormat 更改为复数 dateFormats。总是对数组使用复数以使其更清晰是个好主意。

【讨论】：