Question

使用下面的代码，我创建了Ember View。

<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>
    <div>
      {{view  "select"   content=model1    prompt="Please select a name"  optionValuePath="content.title"  optionLabelPath="content.title" }}
    </div>      
</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."
}

];

以上代码使用提示我显示＆＃34;请选择名称＆＃34; 默认值。

但最初我不想请选择名称默认值。

我的要求是需要将第二个值显示为默认值。

我该怎么做。

Answer 1

与此处提到的问题相关联， Second dropdown not calling EveryTime Based on First drop down

要设置默认值，只需将值设置为特定下拉列表的bound属性。

http://emberjs.jsbin.com/loqivasova/1/edit

<强> JS

App.ComboBoxController = Em.Controller.extend({
    model: posts[0],
});

但是，如果还需要根据此默认值修改第二个下拉菜单，则只需将on("init")添加到setComboBox1Model1函数，

<强> JS

  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").on("init")

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

如果在渲染视图后需要设置值，则应使用视图

<强> JS

App.IndexView = Em.View.extend({
  setDefaulValue:function(){

    this.set("controller.controllers.comboBox.model",posts[0]);
  }.on("didInsertElement")
});

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

如何在Ember js中设置默认值

1 个答案: