淘汰赛：在 foreach 循环中使用 select 在所有选择中选择相同的确切值

Question

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

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

我有一个在另一个 foreach 循环中运行的下拉选择。

一切看起来都不错，但是当我在其中一个下拉列表中选择时，它会自动在所有下拉列表中选择相同的值。

例如，如果我选择值“删除”，那么该 foreach 中的所有下拉菜单都将在“删除”值上被选中。

我非常感谢您能提供帮助。

这是相关的 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>    

对不起，我总是用这个编辑器真的很糟糕>.