Ember JS 和 Iterating 不影响结果计数

Question

我正在使用 Ember JS，我不知道我实现我想要的东西的方法是否正确，或者是否有其他方法。如果有更好的方法请告诉我

现在我有一个名为 "visit" 的模型，它存储的数据是 "time" 的访问

现在时间是通过 select 标签中的硬编码服务循环设置的。

我希望用户 select 访问日期 "a query is sent to the database with the selected date to get the visits in that date" 然后我想将查询结果中的时间与我服务中提供的数组进行比较，并删除相似的.因此，预 selected 时间不可用。

我尝试在服务数据模板中循环，然后在 "visit" 查询中循环，并在时间显示的 class 中添加 "if" 语句以添加 "disabled" 如果两个值相等。

这里的问题是，循环现在向我显示了两次数据，或者可能受查询结果的三次影响。

我认为还有另一种方法，通过简单地处理 "visit" 查询中的数据来简单地从服务和结果中删除匹配的数据，但我不确定该怎么做。

这是我的模板

{{#each formData.time as |time|}}
    {{#each disabledTime as |disabled|}}
        {{#if (eq disabled.value time.value)}}
            <button class="disabled">{{time.time}}</button>
        {{else}}
            <button {{action 'addTime' time}} class="btn-success">{{time.time}}</button>
        {{/if}}
    {{/each}}
{{/each}}

这是我的控制器

formData : Ember.inject.service(),
store : Ember.inject.service(),
disabledTime : Ember.computed("model.issueDate", function(){
    return this.get('store').query('visit', { where : { issueDate : this.get('model.issueDate') } } );
}),

有没有更好的方法来处理 "disabledTime" 中的数据，所以我从服务 "formData.time" 中获取数据并删除类似的数据，然后 return 不存在的数据'匹配。因为这样看起来更简单，我可以通过 "select" 标记而不是按钮在模板中创建循环。

Answer 1

据我了解，您有两个对象数组，它们共享一个属性 value。您现在想要将 formData.time 列表过滤为 value 不在 disabledTime 列表中的对象。

对于第一个列表中的每个对象，您可以预先过滤 formData.time，而不是始终完全遍历第二个列表：

// computed based on contents in formData.time and disabledTime
filteredTimes: Ember.computed('{disabledTime.[],formData.time.[]}', function() {
  let disabled = Ember.get(this, 'disabledTimes');
  // return a filtered formData.time
  return Ember.get(this, 'formData.time').filter(time => {
    let value = Ember.get(time, 'value');
    // inclued only if value not present in disabledTime list
    return !disabled.isAny('value', value));
  });
})

这假设如果一个对象只存在于disabledItem中，它可以被忽略。如果不是这样，您必须合并，而不是过滤列表（即 return 带有禁用标志的新列表）。

Answer 2

如果您查询 return 一个数组，并且您的 FormatDate.time 也是，那么 setDiff 呢？

你会得到类似的东西：

formData: Ember.inject.service(),
store: Ember.inject.service(),
disabledTime: Ember.computed("model.issueDate", function(){
    return this.get('store').query('visit', { where : { issueDate : this.get('model.issueDate') } } );
}),
availableTime: Ember.setDiff('formData.times', 'disabledTime')

并在您的模板中使用它

<select>
    {{#each availableTimes as |time|}}
        <option value=time.time>{{time.time}}</option>
    {{/each}}
</select>

Ember JS 和 Iterating 不影响结果计数

Ember JS and Iterating without effecting the count of the results

javascript

handlebars.js

ember.js

ember-data

sails.js