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 .