I need help with connecting two selectboxes. I want the options in the second one to be determined by what is selected in the first selectbox. I'm new to using Ember and could use some advice on how to approach this problem. I tried using computed properties without success. Should I consider using an observer to monitor changes in the first selectbox?
view
<script type="text/x-handlebars" data-template-name="lookup">
<h1 style="padding: 0; margin: 0 0 15px 0;"> Lookup </h1>
<label for="DEName">Data Extension</label>
{{view "select" contentBinding='content' id="DEName" optionLabelPath="content.name" optionValuePath="content.name" selectionBinding=lookupDE}}
<div class='multi_column_section'>
<div class='inlineInput'>
<label class='inlineLabel' for='filter_column'>Filter Column </label>
{{view "select" contentBinding=adjustFilter}}
</div> <!--
--><div class='inlineInput'> = </div> <!--
--> <div class='inlineInput'>
<label class='inlineLabel' for='filter_value'>Filter Value </label>
<input type='text' class='nj_textBox' id='filter_value' name='filter_value'>
</div>
</div>
<a href="#" {{action 'formString'}} class="generate_btn">Generate</a>
</script>
#Lookup Controller
App.LookupController = Ember.ObjectController.extend({
content:[
{
name: "Customers", fields:["first_name", "last_name", "address", "email"]
},
{
name: "Products", fields:["sku", "name"]
},
{
name:"Sales", fields:["product_sku", "sales_rep", "customer_id", "transaction_id", "date"]
}
],
lookupDE:"Sales",
adjustFilter: function(){
var myContent = this.get("content");
for(i=0; i<myContent.length; i++){
if(myContent[i].name == this.lookupDE){
return myContent[i].fields;
}
}
console.log(this.lookupDE);
// console.log(this.names[i].name);
//return ["first_name", "last_name", "address", "email"];
}.property(),
actions: {
formString: function(){
//console.log(this.lookupDE);
var outputString = '%%[Lookup("' + this.lookupDE + '")]%%';
$("#output").text(outputString);
}
},
});