Question

如果我有一堆表行并且在其中有select标签，我将如何获得所选值？

如果变量＆＃34; selected_ingr_action＆＃34;对于每一行都是相同的，那么当我选择一个项目时，它们都会改变，而不仅仅是一个。

我知道我错过了什么。

{{#Ingredients}}
                <tr>
                    <td class="ingr-bid-col"></td>
                    <td>
                        <div class="row">
                            <div class="col-xs-12">
                                <p class="ingr-name">{{Name}}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <a href="">{{VendorName}}</a><br />
                                <b>pack:</b><span>{{Pack}}</span>
                            </div>
                            <div class="col-xs-6" style="padding-bottom:5px;">
                                <div class="caption">
                                    <b>unit price</b><br />
                                    <span>{{UnitPrice}}</span>
                                </div>
                                <div class="caption">
                                    <b>case price</b><br />
                                    <span>{{CasePrice}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <select class="form-control" value="{{selected_ingr_action}}">
                                    <option value="-1" selected disabled>Action</option>
                                    <option value="0">Rename</option>
                                    <option value="1">Edit Unit Price</option>
                                    <option value="2">Archive</option>
                                </select>
                            </div>
                        </div>
                    </td>
                </tr>
                {{/}}

Answer 1

我想也许您可能会问一个更简单的问题，即为什么行共享这个值。如果是这种情况，简短的回答是使用受限参考（请注意.）：

<select class="form-control" value="{{.selected_ingr_action}}">
    <option value="-1" selected disabled>Action</option>
    <option value="0">Rename</option>
    <option value="1">Edit Unit Price</option>
    <option value="2">Archive</option>
</select>

这会导致selected_ingr_action绑定到列表项，而不是ractive实例的根。

您可以使用wilcard观察者访问每个项目的结果：

r.observe('list.*.selected_ingr_action', function(n, o, k, i){
    console.log('list index', i, 'changed from', o, 'to', n);
});

Check it out here。

默认为root而不是当前上下文的行为是under consideration，需要更改为解析为当前上下文。

Answer 2

一个选项是拥有一个单独的选定值映射，并使用双向绑定来更新该映射（而不是单个selected_ingr_action属性或属于每个项目的selected_ingr_action属性在列表中）。你可以看到这种方法的一个例子here - 细节不同但原理是一样的。

{{#Ingredients :i}} <!-- note the index reference -->

...

<select class="form-control" value="{{selected_ingr_actions[i]}}">
  <option value="-1" selected disabled>Action</option>
  <option value="0">Rename</option>
  <option value="1">Edit Unit Price</option>
  <option value="2">Archive</option>
</select>

Answer 3

有办法解决这个问题。

首先，将select的值绑定到数据中。

即。转这个字符串：

<select class="form-control" value="selected_ingr_action">

进入这个：

<select class="form-control" value="{{selected_ingr_action}}">

假设您的数据结构是这样的：

var Ingredients = [
   {
       Name: String,
       VendorName: String,
       UnitPrice: Number,
       CasePrice: Number,
       selected_ingr_action: String
   },
   /* other entries */ 
];

作为第二个想法，也许您不希望在数据中存储操作类型。我相信更好的方法是使用所谓的Proxy Events自定义参数和Method Calls。

在这里，我将密钥添加到模板中，当您更改选择值时，将使用行的索引调用相应的事件处理程序。

像这样：

{{#each Ingredients: key}} <!-- <<< note that key -->
    <!-- skip -->
    <div class="row">
        <div class="col-xs-12">
             <select class="form-control" on-change="changeAction(this, key)" value="{{this.selected_ingr_action}}">
                 <!-- note this too                  ^^^^^^^^^^^^^^^^^^^^^^ -->
                 <option value="-1" selected disabled>Action</option>
                 <option value="0">Rename</option>
                 <option value="1">Edit Unit Price</option>
                 <option value="2">Archive</option>
             </select>
        </div>
    </div>
{{/each}}

注意，在您的Ractive组件中，您可以引入方法changeAction，它将接收当前行（具有相应的Name，VendorName等属性）并且它是key。像这样：

var ractive = new Ractive({
    /* skip */
    changeAction: function (ingridient, key) {
        // do something with that ingridient
    }
    /* skip */
});

当有多于1时，如何从表中的下拉列表中获取选定值？

3 个答案: