Disclaimer: I use ember-cli for my current project and I will be using some ES6 syntax in this post.

I am going to share how I created a re-usable date picker input field using JQuery UI Date picker and Ember View.

1. Create the custom Ember.View

// File path: ./app/views/date-field.js

import Ember from 'ember';

var DateFieldView = Ember.View.extend({
  tagName: 'input',
  classNames: ['date-picker'],
  attributeBindings: ['type', 'model', 'property'],
  type: 'text',
  model: null,
  property: '',

  didInsertElement: function(){
    "use strict";
    $(this.element).datepicker();
  },

  change: function(e){
    "use strict";
    var property = this.get('property');
    var model = this.get('model');
    var newVal = $(e.target).val();
    model.set(property, newVal);
  }
});

export default DateFieldView;

This custom view takes 2 required parameters, model and property. The model parameter determines which object this view should modify when the value gets changed. The property parameter determines which property of the object this view should modify when the value gets modified. The change function gets called when the value is modified. It grabs the value of the field and set it to the model’s property.

The didInsertElement function is called when the element is inserted. For our case, we want to make sure that JQuery’s date picker is enabled for this element.

2. Use it in your view

<div class="large-3 left column">
  {{view 'date-field' model=model property='dueDate'}}
</div>

Hopefully that was pretty straight forward. Thanks for reading :)

Simple Slide Out Navigation Menu in iOS with Swift (Part 2)

Continuing from part 1, we are going to see how to switch the displayed view controller when one of the menu selections is tapped Continue reading

Subdomain with NGINX on Linode

Published on January 14, 2015