我使用的是ember-data,并且有一个内置的日期类型对象.我正在把它连接到日期选择器(建立在Twitter引导程序组件上).问题是我在输入标记中创建了一个日期属性来存储日期对象.日期对象将存储为长字符串.这必须以某种方式解析为日期对象,然后存储到App.store中.我在哪里进行此转换.这就是我到目前为止所做的.
App.DatePicker = Ember.View.extend({
classNames: ['ember-text-field','input-small'],
tagName: "input",
attributeBindings: ['data','value','format','readonly','type','size'],
size:"16",
type: "text",
format:'mm/dd/yyyy',
value:function(){
var date = this.get('data');
if(date)
return date.format(this.get('format'));
else
return "";
}.property('data'),
data:null,
didInsertElement:function(){
this.$().datepicker({
format:this.get(this.get('format'))
}).on('changeDate', function(ev){
console.log(ev.date);
console.log(ev.target);
ev.target.setAttribute('data',ev.date);
});
}
});
Run Code Online (Sandbox Code Playgroud)
我在这样的视图模板中使用它
{{view App.DatePicker dataBinding="staff.emp_edate" format="mm/dd/yyyy"}}
Run Code Online (Sandbox Code Playgroud)
更改日期时设置日期属性时,日期属性将更改,绑定到staff.emp_edate.不幸的是,staff.emp_edata没有改变.
任何指针都会有很大的帮助.
我在用Ember编写的JS应用程序中的Twitter Bootstrap选项卡中实现了FullCalendar.选项卡的内容中包含以下Handlebars.
<div class="container-fluid">
<div class="row-fluid">
<div class="commands pull-left">
<input type="text" placeholder="Display Calendar for" data-provide="typeahead">
</div>
<div class="commands pull-right">
<a {{bindAttr class=":btn :btn-primary"}} href="#" {{action "newEvent"}}><i class="icon-plus icon-white"></i> Add Event</a>
</div>
</div>
<hr/>
<div class="row-fluid">
{{#view App.CalendarTool id="calendar" class="calendar"}}
{{/view}}
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
App.CalendarTool类定义如下:
require('fullcalendar/fullcalendar');
require('fullcalendar/gcal');
App.CalendarTool = Em.View.extend({
tagName:'div',
attributeBindings:['id','events','owner'],
classNamesBindings:['class'],
didInsertElement:function(){
this.$().fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay '
},
editable: true,
events: []
});
}
});
Run Code Online (Sandbox Code Playgroud)
页面加载时,fullcalendar不会出现.只有顶部的按钮即将出现.当我今天按下时,全日历正在显示.
JSFIddle - http://jsfiddle.net/uMVyu/