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

Question

如果我有一堆 table 行并且其中有 select 标签，我将如何获得 selected 值？

如果每一行的变量 "selected_ingr_action" 都相同，那么当我 select 一个项目时，它们都会改变，而不仅仅是一个。

我知道我错过了什么。

{{#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的值绑定到数据中。

即转动这个字符串：

<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 with custom arguments and Method Calls。

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

像这样：

{{#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 */
});

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 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 实例的根。

您可以使用通配符观察器访问每个项目的结果：

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 更改为解析为当前上下文。

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

How to get selected value from dropdown in a table when there is more then 1?

html

javascript

ractivejs