Question

我有两个使用ember的下拉列表。

如果更改第一个下拉值而不是每次都调用第二个下拉值，我就会遇到问题。

我在这里添加了完整的代码。

请告诉我这段代码我做错了什么

 <script type="text/x-handlebars">
        <h2>Welcome to Ember.js</h2>

        {{outlet}}
    </script>

<script type="text/x-handlebars" data-template-name="index">


    <div>
        {{view  "select"  content=model    prompt="Please select a name"  selectionBinding="controllers.comboBox.model"  optionValuePath="content.title" optionLabelPath="content.body"  }}
    </div>
    {{input type="hidden" value=controllers.comboBox.model.title id="comboval"}}

    <div>
      {{view  "select"   content=model1    prompt="Please select a name"  optionValuePath="content.title"  optionLabelPath="content.title" }}
    </div>

    <p>
        Selected: {{controllers.comboBox.model.title}}
    </p>
</script>

app.js

App = Ember.Application.create({

});

App.Router.map(function () {

});

App.IndexRoute = Ember.Route.extend({
    model: function () {
        return posts;
    }
});

App.IndexController = Em.ArrayController.extend({
    needs: ["comboBox"],
    sendValueToServer: function () {       
        document.getElementById("comboval").value = this.get("controllers.comboBox.model.title");
    }.observes("controllers.comboBox.model"),


    model1: function () {   

        var valueq = this.get('controllers.comboBox.model.title');
        console.log("value "+valueq);      
        return posts1;  
    }.property("controllers.comboBox.model")
});

App.ComboBoxController = Em.Controller.extend({
    model: null,
});

App.ComboBox1Controller = Em.Controller.extend({
    model1: null,  
});
posts = [{
    title: "Raja",
    body: "There are lots of à la carte software environments in this world."
}, {
    title: "Broken Promises",
    body: "James Coglan wrote a lengthy article about Promises in node.js."
},
{
title: "Broken",
body: "James Coglan wrote a lengthy article about Promises in node.js."
}

];


posts1 = [{
    title: "Raja",
    body: "There are lots of à la carte software environments in this world."
}, {
    title: "Broken Promises",
    body: "James Coglan wrote a lengthy article about Promises in node.js."
},
{
    title: "Broken",
    body: "James Coglan wrote a lengthy article about Promises in node.js."
}

];

Answer 1

基于发布的代码，假设

1.需要将每个下拉列表的值保存到控制器的单独属性中。

2.当第一个下拉列表的值发生变化时，第二个下拉列表的内容可能会发生变化。

http://emberjs.jsbin.com/cuyemileci/1/edit?html,js,output

添加了一个功能，该功能可以观察第一个下拉列表的值，以设置与第二个下拉列表的值相关联的第二个控制器的值。

设置用于下拉列表的内容属性中的值非常重要。

<强> JS

App.IndexController = Em.ArrayController.extend({
    needs: ["comboBox","comboBox1"],
    sendValueToServer: function () {       
        document.getElementById("comboval").value = this.get("controllers.comboBox.model.title");
    }.observes("controllers.comboBox.model"),


    model1: function () {   

        var valueq = this.get('controllers.comboBox.model.title');
        console.log("value "+valueq);      
        return posts1;  
    }.property("controllers.comboBox.model"),
  setComboBox1Model1:function(){
    var valueq = this.get('controllers.comboBox.model.title');
    var valueFromPosts1 = posts1.findBy("title",valueq);
    this.set("controllers.comboBox1.model1",valueFromPosts1?valueFromPosts1:null);
  }.observes("controllers.comboBox.model")
});

<强> HBS

<div>
      {{view  "select"   content=model1    prompt="Please select a name"  optionValuePath="content.title"  optionLabelPath="content.title" selectionBinding="controllers.comboBox1.model1" }}
    </div>

第二个下拉列表没有调用EveryTime基于First下拉

1 个答案: