标签：javascript jquery handlebars-js ember-js

我有两个使用余烬的下拉列表.

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

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

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

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

];

解决方法:

根据发布的代码,假设

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

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

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

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

设置用于下拉列表的content属性中存在的值很重要.

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>

标签：javascript,jquery,handlebars-js,ember-js
来源： https://codeday.me/bug/20191013/1904523.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。