淘汰赛：在 foreach 循环中使用 select selects 在所有 selects 中使用相同的精确值

Question

我最近才开始（实际上是我的第一个项目）使用 Knockout 并且非常喜欢它。

但是我运行遇到了一个问题，我似乎无法自行解决。

我在另一个 foreach 循环中有一个 select 下拉列表运行。

一切看起来都很好，但是当我在其中一个下拉菜单中 select 时，它会自动 select 在所有下拉菜单中设置相同的值。

例如，如果我 select 值 'Remove' 那么该 foreach 中的所有下拉菜单将变为 selected on 'Remove' 值。

非常感谢您对此的帮助。

这是相关的 JavaScript（FoldersFileBrowserViewModel 中还有更多内容，但我删除了多余的代码）和 HTML 代码

提前致谢。

/// <reference path="jquery-2.1.4.min.js" />
/// <reference path="knockout-3.3.0.debug.js" />

$(document).ready(function () {
 function FoldersFileBrowserViewModel() {
  var self = this;

  
  //actions drop down
  self.itemActions = ko.observableArray([{ ActionName: 'Remove' }, { ActionName: 'Move' }]);  
  self.selectedAction = ko.observable();

  var subscription = self.selectedAction.subscribe(function (newValue) {
   console.log(newValue.ActionName);
   //alert(self.selectedAction().ActionName);
   /* do stuff */
  });
  // ...then later...
  //subscription.dispose(); // I no longer want notification
  
 }

 ko.applyBindings(new FoldersFileBrowserViewModel()); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<tbody data-bind="foreach: filesInFolder" style="border-top:none;">
  <tr>
   <td></td>
   <td class="color-blue">
    <input type="checkbox" />
    <img src="~/Images/icons/Document-copy-icon.png" alt="file" />
    <span style="font-weight:500; color:#555;" data-bind="text: FileName"></span>
    @*<input type="hidden" data-bind="text: FilePath">*@
   </td>
   <td></td>
   <td>
    @*value: $root.selectedAction,*@
    <select data-bind="options: $root.itemActions, optionsText: 'ActionName', value: $root.selectedAction, optionsCaption: '- Select Action -'"></select>        
    <button data-bind="click: $parent.RemoveFile" style="background-color:transparent; border:none;">
     <img src="~/Images/icons/window-app-list-close-icon.png" alt="delete file" />
    </button>
   </td>
  </tr>
 </tbody>

Answer 1

您需要一些东西来包装每个 fileInfolder 的每个选定操作

基于您的代码的类似内容：

$(document).ready(function () {

var File = function (file) {
    var self = this;
    /* some fields*/
    self.FileName = ko.observable( file ? file.FileName : '');
    self.FilePath = ko.observable( file ? file.FilePath : '');
    self.selectedAction = ko.observable(file ? file.selectedAction : undefined);

    var subscription = self.selectedAction.subscribe(function (newValue) {
        console.log(newValue); // Log selectedAction here comes the optionsValue field 
        //alert(self.selectedAction().ActionName);
        /* do stuff */
    });
    // ...then later...
    //subscription.dispose(); // I no longer want notification
}
function FoldersFileBrowserViewModel() {
    var self = this;


    //actions drop down are ok here load them only once if are the same :)
    self.filesInFolder = ko.observableArray();
    self.itemActions = ko.observableArray([{ ActionName: 'Remove' }, { ActionName: 'Move' }]);      

    self.filesInFolder.push(new File({ FileName : 'File1' }));// just to add some stuff to test
}
ko.applyBindings(new FoldersFileBrowserViewModel());
});

HTML:

<table>
<tbody data-bind="foreach: { data: filesInFolder , as: 'file' }" style="border-top:none;">
    <tr>
        <td></td>
        <td class="color-blue">
            <span style="font-weight:500; color:#555;" data-bind="text: FileName"></span>
            <input type="hidden" data-bind="text: FilePath">
        </td>
        <td></td>
        <td>
            <select data-bind="options: $root.itemActions, optionsText: 'ActionName', optionsValue: 'ActionName', value: selectedAction, optionsCaption: '- Select Action -'"></select>                             
        </td>
    </tr>
</tbody>

抱歉，我一直用这个编辑器真的很糟糕 >.<

淘汰赛：在 foreach 循环中使用 select selects 在所有 selects 中使用相同的精确值

Knockout: Using select in foreach loop selects the same exact value in all selects

javascript

c#

asp.net-mvc

knockout.js

knockout-3.0