第二个下拉菜单根据第一个下拉菜单不调用EveryTime [英] Second dropdown not calling EveryTime Based on First drop down

问题描述

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

如果更改第一个下拉列表值，而不是每次第二个下拉列表值调用，我都面临问题。

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

请告诉我我做错了这个代码

 < script type =text / x-handlebars> 
< h2>欢迎使用Ember.js< / h2> 
 
 {{outlet}} 
< / script> 
 
< script type =text / x-handlebarsdata-template-name =index> 
 
 
< div> 
 {{viewselectcontent = model prompt =请选择一个名称selectionBinding =controllers.comboBox.modeloptionValuePath =content.titleoptionLabelPath =content.body}} 
 < / DIV> 
 {{input type =hiddenvalue = controllers.comboBox.model.title id =comboval}} 
 
< div> 
 {{viewselectcontent = model1 prompt =请选择一个名称optionValuePath =content.titleoptionLabelPath =content.title}} 
< / div> 
 
< p> 
已选择：{{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（{
需要：[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：这个世界上有很多单点软件环境。 
}，{
 title：Broken Promises，
 body：James Coglan在node.js中写了一篇关于Promises的冗长文章。 
}，
 {
标题：Broken，
 body：James Coglan在node.js中写了一篇关于Promises的冗长文章。 
} 
 
]; 
 
 
 posts1 = [{
 title：Raja，
 body：这个世界上有很多点菜软件环境。 
}，{
 title：Broken Promises，
 body：James Coglan在node.js中写了一篇关于Promises的冗长文章。 
}，
 {
标题：Broken，
 body：James Coglan在node.js中写了一篇关于Promises的冗长文章。 
} 
 
]; 
  

解决方案

根据发布的代码，假设

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

2.当第一个下拉列表的值更改时，第二个下拉列表的内容可能会更改。

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

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

js

  App.IndexController = Em.ArrayController.extend（{
需要：[comboBox，comboBox1 ]，
 sendValueToSe rver：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> 
 {{viewselectcontent = model1 prompt =请选择一个名称optionValuePath =content.titleoptionLabelPath =content.titleselectionBinding =controllers.comboBox1.model1}} 
 < / DIV> 
  

I have two drop down list using ember.

I have facing issue if change first drop down value not calling every time second dropdown values .

Here I have added my complete code .

please tell me what i did wrong this code

 <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."
}

];

解决方案

Based on the code posted it is assumed that,

1.It is required to save values of each drop down list to a separate property of a controller.

2.When the value of the first drop down list changes then the contents of the second drop down list may change.

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

Added a function that observes the value of the first drop down to set the value of the second controller associated with the value of the second drop down list.

It is important to set values that are present inside the content property used for the drop down list.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！