contentBinding Ember 中的两个选择框

Question

我无法将一个 selectbox 绑定到另一个。我希望一个 select 框中的选项取决于另一个 select 中的内容。在这种情况下，我想根据第一个 selected 中的内容填充第二个 selectbox 的内容。我是 Ember 的新手，所以我正在寻找有关采取何种方法的指导。我试过使用计算属性，但没有成功。我是否需要使用观察者来监视第一个 select 框中的变化？

查看

<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'> &nbsp; = &nbsp; </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);    
}

},
});

Answer 1

在 Ember 中这很容易。从概念上讲，您为第二个 select 框的数据创建了一个计算属性，它取决于第一个框的 selection。这可以通过 .property('selectionOfFirstSelect') 符号来创建一个计算的、依赖的属性.

这是您可能想要检查的实现：

https://gist.github.com/dgroch/11126341

contentBinding Ember 中的两个选择框

contentBinding two selectboxes in Ember

javascript

ember.js

查看