灰燼。在頁面加載時選擇空白，但選擇了第一個選項

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的代碼段。選擇：

{{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

您應該為Ember.Select提供prompt屬性。 這會將默認的<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