将模型日期defaultValue设置为字符串

Question

我尝试构建一个“任务管理器”来记录我的客户向我发送的任务。

我有我的新task.hbs形式

<div id="new-task-form" class="col-md-12"> 
<form> 
    <div class="form-group"> 
     <label>Customer</label> 
     {{input type="text" class="form-control" value=customer placeholder="Add Customer..."}} 
    </div> 

    <div class="form-group"> 
     <label>Task</label> 
     {{textarea class="form-control" value=task placeholder="Add Task..."}} 
    </div> 

    <div class="form-group"> 
     <label>Incoming</label> 
     {{input type="number" class="form-control" value=incoming placeholder="Bring it on..."}} 
    </div> 
    <div class="form-group"> 
     <label>Pending</label> 
     {{input type="number" class="form-control" value=pending placeholder="Don't bring it on..."}} 
    </div> 

    <div class="form-group"> 
     <label>Closed Date</label> 
     {{input type="date" class="form-control" value=closed_date placeholder="Please close me..."}} 
    </div> 

    <button {{action 'addTask'}} class="btn btn-primary">Submit</button> 
</form> 

我的控制器。

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    actions: { 
     addTask: function(){ 
      var customer = this.get('customer'); 
      var task = this.get('task'); 
      var incoming = this.get('incoming'); 
      var pending = this.get('pending'); 
      var closed_date = this.get('closed_date'); 
      //Create new task 
      var newTask = this.store.createRecord('task',{ 
       customer: customer, 
       task: task, 
       incoming: incoming, 
       pending: pending, 
       closed_date: closed_date 
      }); 
      //save to db 
      newTask.save(); 
     } 
    } 
}); 

和模型

import Model from 'ember-data/model'; 
import attr from 'ember-data/attr'; 

export default Model.extend({ 
    customer: attr('string'), 
    task: attr('string'), 
    incoming: attr('number', { defaultValue: 0 }), 
    pending: attr('number', { defaultValue: 0 }), 
    closed_date: attr('date'), 
    created: attr('string', { 
    defaultValue: function(){ 
     return new Date(); 
    } 
    }) 
}); 

我怎么能设置一个默认值模型为的closed_date输入一个字符串“没有进入尚”？

如果我这样离开它，而不是输入一个值，我会得到一个“无效的日期”。

closed_date: attr('date') 

如果我设置这个我得到当前日期。

closed_date: attr('date', { defaultValue: 'Not entered yet' }) 

Answer 1

从我的经验，我建议你离开closed_date，因为它是（如日期），并专注于您要显示它时，不进入closed_date每个代替显示Not entered yet。

例如，当您展示模板，你可以使用模型值：（！这也给了你，你正在寻找的占位符的功能）

Closed date: {{if model.closed_date model.closed_date 'Not entered yet'}} 

Answer 2

考虑使用ember-pikaday一个不错的日期选择经验。此外，我建议您使用新任务路线的模型钩子来完成模型设置。再加上ember-data-route做的航线出境清理，你应该是好去：

router.js：

this.route('tasks', function() { 
    this.route('new'); 
}); 

routes/tasks/new.js：

import Ember from 'ember'; 
import DataRoute from 'ember-data-route'; 

export default Route.extend(DataRoute, { 
    model() { 
    return this.store.createRecord('task'); 
    } 
}); 

• 注意下面如何表单字段值已更新至model.fieldName。这些值绑定到您在路线模型钩子中创建的模型。

templates/tasks/new.hbs：

<div id="new-task-form" class="col-md-12"> 
<form> 
    <div class="form-group"> 
     <label>Customer</label> 
     {{input type="text" class="form-control" value=model.customer placeholder="Add Customer..."}} 
    </div> 

    <div class="form-group"> 
     <label>Task</label> 
     {{textarea class="form-control" value=model.task placeholder="Add Task..."}} 
    </div> 

    <div class="form-group"> 
     <label>Incoming</label> 
     {{input type="number" class="form-control" value=model.incoming placeholder="Bring it on..."}} 
    </div> 
    <div class="form-group"> 
     <label>Pending</label> 
     {{input type="number" class="form-control" value=model.pending placeholder="Don't bring it on..."}} 
    </div> 

    <div class="form-group"> 
     <label> 
      Closed Date: 
      {{pikaday-input value=model.closedDate placeholder="Please close me..."}} 
     </label> 
    </div> 

    <button {{action 'addTask'}} class="btn btn-primary">Submit</button> 
</form> 

• 注：喜欢camelCasedMultipleWordModelAttributeName VS underscored_attribute_name

models/task.js：

import Model from 'ember-data/model'; 
import attr from 'ember-data/attr'; 

export default Model.extend({ 
    customer: attr('string'), 
    task: attr('string'), 
    incoming: attr('number', { defaultValue: 0 }), 
    pending: attr('number', { defaultValue: 0 }), 
    closedDate: attr('date', { 
    defaultValue() { return new Date(); } 
    }), 
    created: attr('string', { 
    defaultValue() { return new Date(); } 
    }) 
}); 

现在很好PA RT。这是你的控制器动作看起来什么，当你做你安装在你的路线模型钩状：

controllers/tasks/new.js

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    actions: { 
    addTask: function(){ 
     this.get('model').save(); 
    } 
    } 
}); 

和额外的信用，你可以安装ember-route-action-helper和移动控制器动作到路线并卸下控制器完全。