將模型日期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和移動控制器動作到路線並卸下控制器完全。