Thorax 选择菜单集合第一个选项

Question

我有两个通过 api 调用填充 json 数据的下拉选择选项菜单。我想添加“选择”选项作为第一个没有价值的选项。有没有办法在我的视图或车把中实现这一点？我尝试了 unshift 方法，但似乎无法让集合成功添加新选项。这是我的代码：

var productsMenuView = new Thorax.View({
    template: Handlebars.compile($('#products-template').html()),
    collection: new Thorax.Collection(
        [{
            id: selectMenu.id,
            name: selectMenu.name
        }]
    ),
    initialize: function() {
        this.collection.fetch({url: 'products.json'});
        myString = this.collection;
        obj = myString.unshift({id: "0", name: "Select"});
        console.log(myString);
        return obj;
    }
});

这是 Handlebars 模板：

<script id="products-template" type="text/x-handlebars-template">
{{#collection tag="select" id="productSelect" class="modelSearchMenus"}}
    <option value="{{name}}">{{name}}</option>
{{/collection}}
</script>

我的菜单显示以下选项列表：

<select id="productSelect" class="modelSearchMenus" data-view-cid="view21" data-view-helper="collection" data-collection-element="true" data-collection-cid="collection7">
<option value="Audio equipment" data-model-cid="c35">Audio equipment</option>
<option value="Cooktop" data-model-cid="c36">Cooktop</option>
<option value="Drill" data-model-cid="c37">Drill</option>
<option value="Fan" data-model-cid="c38">Fan</option>
<option value="Garbage disposal" data-model-cid="c39">Garbage disposal</option>
<option value="Microwave" data-model-cid="c40">Microwave</option>
<option value="Pruner" data-model-cid="c41">Pruner</option>
<option value="Range" data-model-cid="c42">Range</option>
<option value="Ratchet/nut driver" data-model-cid="c43">Ratchet/nut driver</option>
<option value="Vacuum" data-model-cid="c44">Vacuum</option>
<option value="Wall oven" data-model-cid="c45">Wall oven</option>

这就是我希望菜单显示的内容：

<select id="productSelect" class="modelSearchMenus" data-view-cid="view21" data-view-helper="collection" data-collection-element="true" data-collection-cid="collection7">
<option value="">Select</option>
<option value="Audio equipment" data-model-cid="c35">Audio equipment</option>
<option value="Cooktop" data-model-cid="c36">Cooktop</option>
<option value="Drill" data-model-cid="c37">Drill</option>
<option value="Fan" data-model-cid="c38">Fan</option>
<option value="Garbage disposal" data-model-cid="c39">Garbage disposal</option>
<option value="Microwave" data-model-cid="c40">Microwave</option>
<option value="Pruner" data-model-cid="c41">Pruner</option>
<option value="Range" data-model-cid="c42">Range</option>
<option value="Ratchet/nut driver" data-model-cid="c43">Ratchet/nut driver</option>
<option value="Vacuum" data-model-cid="c44">Vacuum</option>
<option value="Wall oven" data-model-cid="c45">Wall oven</option>

我做错了什么？

Answer 1

如果可以的话，我只是将另一个元素移到集合中。

collection.fetch({
  success: function(collection) {
    collection.unshift(new Thorax.Model({name: 'Select'}));
  }
});

理想情况下，您可以有一个id 来设置“”，但如果没有，您可以添加一个 if 语句，例如：

{{#collection tag="select" id="productSelect" class="modelSearchMenus"}}
    <option value="{{#if name === 'Select'}}{{else}}{{name}}{{/if}}">{{name}}</option>
{{/collection}}

Answer 2

将它添加到您的模板可能是完成此操作的最简单方法：

<script id="products-template" type="text/x-handlebars-template">
<option value="">Select</option>
{{#collection tag="select" id="productSelect" class="modelSearchMenus"}}
    <option value="{{name}}">{{name}}</option>
{{/collection}}
</script>