Knockout：在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() { 
 
\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>  

對不起，我真的不好使用這個編輯器總是>。 <