passing array of ember objects from ember component to template

Question

I am trying to make use of ember components for re-usability . I am trying to make handlebar templates code free and template have just place holders for the fields / content which i pass from the controller / component .

I am having a weird issue with the following implementation

issue 1: When i pass array of objects to Ember.select contentBinding , it gives me following error

Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed {_direction: fwd, _from: <Ember.Object:ember257>,<Ember.Object:ember258>, _to: content, _directionMap: [object Object], _readyToSync: true, _oneWay: undefined}

issue 2: valuebinding to the model is not happening . I want to bind the value of the each field to the model object .

Here is my code looks like :

App.Core.CeGender = [
  Ember.Object.create({ value: "Male", id: 'Male' }),
  Ember.Object.create({ value: "Female", id: 'Female' })
  ],


App.Core.fooFields = [
Ember.Object.create({
    type: Ember.TextField,
    firstName: "",
    label: "First Name",
    value: "controller:model.firstName"
}), Ember.Object.create({
    type: Ember.TextField,
    label: "Middle",
    name: "middleInitial",
    placeholder: "Middle",
    value: "controller:model.middleName"
}),
Ember.Object.create({
    type: Ember.Select,
    contentBinding: App.Core.CeGender,
    placeholder: "gender",

}),

Here is my component :

App.Core.Component = Ember.Component.extend({
    tagName: '',
    title: 'Your Information',
    classNames: ["xxxxx"],
    layoutName: "xxxx",
    fields: App.Core.fooFields ,

});

Here is my component script :

<script type="text/x-handlebars" data-template-name="components/xxxx">
{{#each field in fields}}
           {{ view field.type

            contentBinding=field.contentBinding
            name=field.name
            id=field.name
            placeholder=field.placeholder
            data-rule-required=field.dataRuleRequired
            data-rule-alphachar=field.dataRuleAlphachar
            data-msg-required=field.dataMsgRequired
            data-rule-maxlength=field.dataRuleMaxlength
            data-set=field.dataSet
            data-validation=field.dataValidation
            optionValuePath=field.optionValuePath
            optionLabelPath=field.optionLabelPath
            pattern=field.pattern
            }}
       {{/each}}

</sript>

Any help is greatly appreciated !!

NOTE: For issue 1 : if i pass App.Core.fooFields as array of json elements for eg :

App.Core.fooFields = [{
        type: Ember.TextField,

    },
{type: Ember.select,
contentBinding: App.Core.CeGender,
},]

I dont see the error which i stated above , and contentbinding is adding this array to the field in the template . I dont know why ember is behaving differently in these cases .

jmurphyau jmurphyau · Accepted Answer · 2015-04-08T19:11:29

The issue looks like it's here:

Ember.Object.create({
  type: Ember.Select,
  contentBinding: App.Core.CeGender,
  placeholder: "gender"
})

You should change 'contentBinding' to simply 'content' - since you're not actually binding anything:

Ember.Object.create({
  type: Ember.Select,
  content: App.Core.CeGender,
  placeholder: "gender"
})

Your template would also need to reference .content not .contentBinding.

passing array of ember objects from ember component to template

1 Answers