Ember.在页面加载时选择空白，但选择了第一个选项

Posted 2023-02-26

【中文标题】Ember.在页面加载时选择空白，但选择了第一个选项

【英文标题】：Ember.Select blank on page load, but first option selected

【发布时间】：2014-06-05 19:25:46

【问题描述】：

我有一个 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 的 sn-p：

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>

抓取值工作正常，表单工作正常，但我如何阻止它最初为空白？谢谢！

【参考方案1】：

您应该向Ember.Select 提供prompt 属性。这将为渲染的<select> 添加一个默认的<option>，没有任何值。没有selection时会显示这个选项：

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

见http://emberjs.com/api/classes/Ember.Select.html#toc_supplying-a-prompt