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>

Thorax选择菜单集合第一选项

2 个答案: