Hull Profile Widget with data coming from Facebook

main.js

Hull.widget('profile', {

  templates: ['profile'],

  refreshEvents: ['model.hull.me.change'],

  fields: [
    { name: 'name', type: 'text', placeholder: 'Name' },
    { name: 'email', type: 'text', placeholder: 'Email' }
  ],

  options: {
    fields: 'name,email'
  },

  datasources: {
    profile: function() {
      if (this.loggedIn()) {
        return this.api('hull/me/profile');
      }
    },
    facebookData: function() {
      if (this.loggedIn().facebook) {
        return this.api('facebook/me', { fields: this.options.fields });
      }
    }
  },

  actions: {

    save: function(source, event, data) {
      event.preventDefault();
      var profileFields = this.$el.find('form').serializeArray();
      var profileData = {};
      _.each(profileFields, function(f) { profileData[f.name] = f.value; });
      this.api('hull/me/profile', profileData, 'put').then(_.bind(function() {
        this.sandbox.emit('hull.profile.saved');
        this.render();
      }, this));
    }
  },

  beforeRender: function(data) {
    var fieldNames = _.pluck(this.fields, 'name');
    data.fields  = _.clone(this.fields);
    if (data.profile && this.loggedIn().facebook) {
      data.profile = _.extend(data.facebookData, data.profile);
      _.each(data.fields, function(f) {
        f.value = data.profile[f.name];
      });
    }
    return data;
  }
});

profile.hbs

{{#if loggedIn}}
<form class="hull-form">

  <ul class='unstyled'>
    {{#fields}}
      <li>
          <label for="hull-form-{{name}}">{{label}}</label>

          {{#ifEqual type "text"}}

              <input
                class="hull-form__text-input"
                data-hull-input
                type="{{type}}"
                id="hull-form-{{name}}"
                name="{{name}}"
                value="{{value}}"
                placeholder="{{placeholder}}"
              />

          {{/ifEqual}}

          {{#ifEqual type "email"}}

              <input
                data-hull-input
                type="{{type}}"
                id="hull-form-{{name}}"
                name="{{name}}"
                value="{{value}}"
                placeholder="{{placeholder}}"
              />

          {{/ifEqual}}

          {{#ifEqual type "url"}}

              <input class="hull-form__text-input hull-form__text-input--email"
                data-hull-input
                type="{{type}}"
                id="hull-form-{{name}}"
                name="{{name}}"
                value="{{value}}"
                placeholder="{{placeholder}}"
              />

          {{/ifEqual}}

          {{#ifEqual type "tel"}}

              <input class="hull-form__text-input hull-form__text-input--email"
                data-hull-input
                type="{{type}}"
                id="hull-form-{{name}}"
                name="{{name}}"
                value="{{value}}"
                placeholder="{{placeholder}}"
              />

          {{/ifEqual}}

          {{#ifEqual type "select"}}
              <select class="hull-form__select"
              data-hull-input
              type="{{type}}"
              id="hull-form-{{name}}"
              name="{{name}}"
                {{#options}}
                    <option
                      label="{{label}}"
                      value="{{value}}"
                      {{#ifEqual ../value value}}selected{{/ifEqual}}
                    >{{value}}</option>
                {{/options}}
              </select>
          {{/ifEqual}}

          {{#ifEqual type "checkbox"}}
              <label>
                <input class="hull-form__checkbox"
                  data-hull-input
                  type="{{type}}"
                  id="hull-form-{{name}}"
                  name="{{name}}"
                  {{#ifEqual value "true"}}checked{{/ifEqual}}
                  placeholder="{{placeholder}}"
                />
                {{checkboxLabel}}
              </label>
          {{/ifEqual}}
      </li>

      {{/fields}}

    <li>
      <input type="submit" data-hull-action="save" class="btn btn-primary" value="Save" />
    </li>

  </ul>
</form>
{{else}}
<div data-hull-widget='identity@hull'></div>
{{/if}}