我最近刚刚开始(实际上是我的第一个项目)使用 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>
最佳答案
您需要一些东西来包装每个 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>
抱歉,我一直不太好用这个编辑器>.<
关于javascript - knockout : Using select in foreach loop selects the same exact value in all selects,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31213353/