Нокаут: использование select в цикле foreach выбирает то же точное значение во всех selects

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() { 
 
\t function FoldersFileBrowserViewModel() { 
 
\t \t var self = this; 
 

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

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

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

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

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>  

Извините, я действительно плохо использую этот редактор всегда>. <