页面加载上的Ember.Select空白，但第一个选项被选中

Question

我有一个Ember.Select选择框(因为在互联网上没有任何地方有从控制器的常规老选择框中获取一个值的细节-如果你能启发的话问题是，在页面加载时，它显示为空白。完全空白：

​

但是，如果我单击它，您将看到选择了正确的默认值：

​

​

甚至连一个空选项都没有。如果我逃离它，它将保持空白，但只要我单击一个选项：

​

这是我的控制器，在这里它可以从：

App.IndexController = Ember.ArrayController.extend({
selectedDistance: null,
selectDistance: [
    { label: "within 10 mi", value: "10" },
    { label: "within 20 mi", value: "20" },
    { label: "within 5000 mi", value: "5000" },
],
});

下面是创建Ember.Select的代码片段：

{{view Ember.Select
content=selectDistance  
optionValuePath="content.value" 
optionLabelPath="content.label"
selectionBinding="selectedDistance"}}

下面是呈现的HTML：

<select id="ember458" class="ember-view ember-select form-control">
    <script id="metamorph-3-start" type="text/x-placeholder"></script>
    <script id="metamorph-3-end" type="text/x-placeholder"></script>
    <script id="metamorph-4-start" type="text/x-placeholder"></script>
    <script id="metamorph-8-start" type="text/x-placeholder"></script>
    <script id="metamorph-5-start" type="text/x-placeholder"></script>
    <option id="ember478" class="ember-view" value="10">
        <script id="metamorph-9-start" type="text/x-placeholder"></script>
        within 10 mi
        <script id="metamorph-9-end" type="text/x-placeholder"></script>
    </option>
    <script id="metamorph-5-end" type="text/x-placeholder"></script>
    <script id="metamorph-6-start" type="text/x-placeholder"></script>
    <option id="ember479" class="ember-view" value="20">
        <script id="metamorph-10-start" type="text/x-placeholder"></script>
        within 20 mi
        <script id="metamorph-10-end" type="text/x-placeholder"></script>
    </option>
    <script id="metamorph-6-end" type="text/x-placeholder"></script>
    <script id="metamorph-7-start" type="text/x-placeholder"></script>
    <option id="ember480" class="ember-view" value="5000">
        <script id="metamorph-11-start" type="text/x-placeholder"></script>
        within 5000 mi
        <script id="metamorph-11-end" type="text/x-placeholder"></script>
    </option>
    <script id="metamorph-7-end" type="text/x-placeholder"></script>
    <script id="metamorph-8-end" type="text/x-placeholder"></script>
    <script id="metamorph-4-end" type="text/x-placeholder"></script>
</select>

抓取值很好，表单也很好，但是如何避免它最初是空白的呢？谢谢!

Answer 1

您应该向prompt提供一个Ember.Select属性。这将向呈现的没有值的<option>添加一个默认的<select>。当没有selection时，将显示此选项。

{{view Ember.Select
  content=selectDistance  
  optionValuePath="content.value" 
  optionLabelPath="content.label"
  selectionBinding="selectedDistance"
  prompt="Please Select"}}

请参阅supplying-a-prompt