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

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

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