Ember.js: Supplying controller content as JSON?

Vote count:

0

The title for this question isn't the best, but I'm not sure how to summarize my problem in one sentence.

I have a MVC set for an object, call it "Program". Part of a Program's model is a property called "configuration", which is stringified JSON that describes a sort of configuration for the Program.

This stringified JSON is an array that contain objects of similar structure. I would like to take this JSON array and convert the elements into Ember objects, each with a Model/View/Controller.

In the UI, the user builds this configuration using a drag-and-drop interface. They drag icons from some panel into the configuration-building panel, where it becomes a new entry in the configuration.

This is easy to do with vanilla JavaScript, but I suppose the entire point of using a framework is to... use the framework.

So, I broke down the configuration builder into two sets of MVC things.

First is the container that displays the configuration item list:

// controller
App.CfgController = Ember.ArrayController.extend({
  itemController: 'cfgcomponent'
});

// view
App.CfgView = Ember.View.extend({
  templateName: 'cfg',
  tagName: ''
});

// model
// ? none ?

// route
App.CfgRoute = Ember.Route.extend({
});

Then the MVandC for each of the configuration components:

// controller
App.CfgComponentController = Ember.ObjectController.extend({
});

// view
App.CfgComponentView = Ember.View.extend({
  templateName: 'cfgcomponent',
  tagName: 'div',
});

// model
App.CfgComponent = Ember.Object.extend({
  caption: ''
});

The templates:

  <script type="text/x-handlebars" data-template-name="cfgcomponent" id="cfgcomponent">
    {{view.caption}}
  </script>

  <script type="text/x-handlebars" data-template-name="cfg" id="cfg">
    <ul class="list-group">
      <li class="list-group-item">Drag components to build your configuration</li>
      {{each ??? itemViewClass="App.CfgComponentView"}}
    </ul>
  </script>

---

I want the configuration builder to use the CfgController/CfgView and have each of the configuration components use the CfgComponentController/CfgComponentView/CfgComponent model. As you can see, my code is incomplete as I have no idea what to do.

I thought about trying to keep some sort of parallel computed property that stores an array of Ember objects that represents the JSON, but that was not working. I added this computed property to the Program controller:

   cfgobjects: function () {
     // just returning some test data
     return ['a', 'b', 'c'];
   }

And then tried to display them with this blockless each helper:

{{each cfgobjects itemViewClass="App.CfgComponentView"}}

And this returned the following error:

Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed function () {
  return ['a', 'b', 'c'];
}

I feel like I'm headed in the wrong direction in the first place. Any help is appreciated. I am still very very new to Ember, so long drawn-out details would be great.

asked 49 secs ago

Mike

61