0

我有一个 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>

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

4

1 回答 1

2

您应该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

于 2014-06-08T08:13:53.317 回答