Support Ember objects for data

toddjordan · Feb 19, 2016 · d14b180 · d14b180
1 parent f5946c3
commit d14b180
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 4 deletions.
diff --git a/addon/components/dynamic-form.js b/addon/components/dynamic-form.js
@@ -17,12 +17,15 @@ const DynamicForm = Ember.Component.extend({
   renderSchema: Ember.K,
 
   didInsertElement() {
+    this._super(...arguments);
     this.$().alpaca(this.get('renderSchema'));
   },
 
   didReceiveAttrs() {
+    this._super(...arguments);
     let schemaObj = this._initSchema(this.get('schema'));
-    const schemaWithPostRender = this._buildPostRender(schemaObj);
+    const schemaWithData = this._processData(schemaObj);
+    const schemaWithPostRender = this._buildPostRender(schemaWithData);
     const schemaWithActions = this._addActions(schemaWithPostRender);
     const filteredSchema = this._processFilters(schemaWithActions);
     const mappedSchema = this._replaceKeywordsWithFunctions(filteredSchema);
@@ -88,16 +91,28 @@ const DynamicForm = Ember.Component.extend({
     return newSchema;
   },
 
+  _processData(schemaObj) {
+    if (this.get('data') && Ember.typeOf(this.get('data')) === 'object') {
+      schemaObj.data = this.get('data');
+    } else if (this.get('data') && Ember.typeOf(this.get('data')) === 'instance') {
+      let keys = Object.keys(schemaObj.schema.properties);
+      let dataObj = _.reduce(keys, (data, key) => {
+        data[key] = this.get('data').get(key);
+        return data;
+      }, {});
+      schemaObj.data = dataObj;
+    }
+    return schemaObj;
+  },
+
   _initSchema(schema) {
     let schemaObj;
     if (typeof schema === 'string') {
       schemaObj = JSON.parse(schema);
     } else {
       schemaObj = _.clone(schema, true);
     }
-    if (this.get('data')) {
-      schemaObj.data = this.get('data');
-    }
+
     return schemaObj;
   },
 

diff --git a/tests/integration/components/data-binding-test.js b/tests/integration/components/data-binding-test.js
@@ -1,6 +1,7 @@
 //import Ember from 'ember';
 import hbs from 'htmlbars-inline-precompile';
 import { moduleForComponent, test } from 'ember-qunit';
+import Ember from 'ember';
 
 const schemaObject = {
   "schema": {
@@ -25,6 +26,13 @@ const dataObject = {
   "ranking": "not too shabby"
 };
 
+const EmberData = Ember.Object.extend({
+  name: Ember.computed('firstName', 'lastName', function () {
+    return `${this.get('firstName')} ${this.get('lastName')}`;
+  })
+
+});
+
 moduleForComponent('/dynamic-form' , 'Integration | Component | dynamic-form:data-binding', {
   integration: true
 });
@@ -45,3 +53,25 @@ test('should update input value when model updated', function (assert) {
   this.set('dataObject', dataObject);
   this.render(hbs`{{dynamic-form schema=schemaObject data=dataObject}}`);
 });
+
+test('should work with an ember object as data', function (assert) {
+  const fixtureSchema = _.clone(schemaObject, true);
+  const done = assert.async();
+  fixtureSchema.postRender = () => {
+    assert.equal(this.$('.alpaca-field-text input').val(), 'Todd Jordan');
+    fixtureSchema.postRender = () => {
+      assert.equal(this.$('.alpaca-field-text input').val(), 'Jeremy Rowe');
+      done();
+    };
+    this.get('dataObject').set('firstName', 'Jeremy');
+    this.get('dataObject').set('lastName', 'Rowe');
+    this.render(hbs`{{dynamic-form schema=schemaObject data=dataObject}}`);
+  };
+  this.set('schemaObject', fixtureSchema);
+  this.set('dataObject', EmberData.create({
+    firstName: 'Todd',
+    lastName: 'Jordan',
+    ranking: 'excellent'
+  }));
+  this.render(hbs`{{dynamic-form schema=schemaObject data=dataObject}}`);
+});