Knockout.js 如何基于单选按钮选择将ObservalArray的过滤子集返回到下拉框

我有一个下拉框和一个单选按钮，它们是详细信息行的一部分。可以有多个详细信息行，因此可以有此单选按钮和下拉列表的多个实例。我有一个可观察的资产负债表，是“dl”和“sb”类型贷款的主列表。“dl”和“sb”是单选按钮上的值。当用户选择单选按钮时，我想在下拉框中填充从单选按钮中选择了贷款类型（“dl”或“sb”）的贷款列表。因此，例如，如果用户选择了值为“sb”的单选按钮，那么我想在所选详细信息行的下拉列表中只填充那些属于“sb”贷款类型的贷款（在observable中，名为DocStandBy的字段与贷款类型关联，同一observable中的LoanNum是要在下拉框中显示的贷款编号）

我不知道如何根据单选按钮上的点击事件将ObservalArray的筛选子集返回到下拉框中。下面的代码显然不起作用，但确实说明了我正在尝试做什么。我如何更改下面的代码以使其起作用

看法-

---

LoanDetails数组的每个元素都需要有一个单独的计算值，该值根据所选的DocStandby返回一个经过过滤的Abloan数组

您会注意到LoadDetails的每个元素都有自己的ko.computed（FilteredLoans），它只返回一个基于DocStandby observable值的过滤器。它使用一个公共贷款源（ABLoans），因此如果要更新该数组，那么所有计算的行项目也将重新过滤

下面是一个基本示例，它向您展示了调用的机制，您需要调整您的精确对象模型，特别是如何创建LoadDetail数组项

HTML

<table>
    <tbody data-bind="foreach: LoanDetails">
        <tr colspan="2">
            <td><input type="radio" data-bind="checked: DocStandby, attr: { 'name': SeedID(), 'value': 'DL' }" />Documentary
                <input type="radio" data-bind="checked: DocStandby, attr: { 'name': SeedID(), 'value': 'SB' }" />Stand By</td>
        </tr>
        <tr>
            <td>AB Loan:</td>
            <td><select data-bind="options: FilteredLoans, value: LoanNum, optionsValue: 'LoanNum', optionsText: 'LoanNum', optionsCaption: 'Choose...'"></select></td>
        </tr>
    </tbody>
</table>

---

以上代码见此

LoanDetails的每个元素的结构是什么？我的思路是正确的，但需要做一些不同的事情。您的代码同时填充SeedID、DocStandby、LoanNum和FilteredLoans。我的用户单击“添加”按钮并添加空行。我按您的方式对其进行了编码，但创建了一个n每次调用buildrow时都有一个空行。在与单选按钮关联的单击事件上，我想在此时填充FilteredLoans。您能看一下我的编辑并告诉我如何在SaveDocStand函数的LoanDetails ObservableArray中填充FilteredLoans吗？我刚刚重新添加了编辑。AddLC方法添加了一个空行，即SaveDocStand是我需要填充我在AddLC中创建的FilteredLoans的地方。感谢您的回答！请参阅“VIEWMODEL EDITED”您不能重新分配在该函数中计算的FilteredLoans，Knockout不会检测到更改。将FilteredLoans转换为observableArray（在buildRow中创建）并在SaveDocStand函数中设置其值。除了调用GetLoansByClient之外，您在我的回答中所做的操作与调用

ko.utils.arrayForEach（LoandDetails（））完全相同…

应该只处理1个项目，所以为什么要循环。最后，为什么每次单选点击都会重置主列表。ABLOAN属于每行，或者每次点击都不应该重置。是

GetLoansByClient

异步吗？您使用了一些变量和函数，但没有在示例中声明。

vm.LCLoans

和

buildRow

和

GetLoansByClient

。添加这些将填充一些上下文，我可以更新我的示例以匹配您的确切场景

  define(['services/logger', 'durandal/system', 'plugins/router', 'services/CertificateDataService', 'controls/Lucas', 'services/ErrorLoggingDataService',  'services/LCDataService'],
function (logger, system, router, CertificateDataService, Lucas, ErrorLoggingDataService, LCDataService) {

    var clients = ko.observableArray([]);
    var ABLoans = ko.observableArray([]);

    var clientID = ko.observable();
    var LoanDetails = ko.observableArray([]);

    var dlOrSB = ko.observable();


    var vm = {
        activate: activate,
        clients: clients,
        LoanDetails: LoanDetails,
        ABLoans: ABLoans,
        dlOrSB: dlOrSB,
    clientID: clientID,
   AddLC: function () {

            nextnum(nextnum() + 1);
            LoanDetails.push(buildRow(nextnum(), vm.LCLoans, 'DD'));

     },
    SaveDocStand: function (row) {

            if (row.DocStandby() != null && row.DocStandby() != '') {
        //POPLUATES ABLoans observablearray, or THE MASTER LIST OF LOANS
                GetLoansByClient(row.DocStandby(), clientID(), 'AB');
            }

        ko.utils.arrayForEach(LoanDetails(), function (item) {


                if (item.SeedID() == row.SeedID()) {
                    item.FilteredLoans = ko.computed(function () {
                        var val = row.DocStandby();
                        return LCLoans().filter(function (item) {
                            return val && item.LoanSubType === val;
                        });
                    })



                }
            });


            dlOrSB = row.DocStandby();



        }
 };

<table>
    <tbody data-bind="foreach: LoanDetails">
        <tr colspan="2">
            <td><input type="radio" data-bind="checked: DocStandby, attr: { 'name': SeedID(), 'value': 'DL' }" />Documentary
                <input type="radio" data-bind="checked: DocStandby, attr: { 'name': SeedID(), 'value': 'SB' }" />Stand By</td>
        </tr>
        <tr>
            <td>AB Loan:</td>
            <td><select data-bind="options: FilteredLoans, value: LoanNum, optionsValue: 'LoanNum', optionsText: 'LoanNum', optionsCaption: 'Choose...'"></select></td>
        </tr>
    </tbody>
</table>

var vm = {
    LoanDetails: ko.observableArray([]),
    ABLoans: ko.observableArray([])
};

var buildRow = function( seed, ABLoans) {
    var obj = {
        SeedID: ko.observable(seed),
        DocStandby: ko.observable(),
        LoanNum: ko.observable()
    };

    // Add to object after obj is created so we can use that instance
    // using "this" to read the items DocStandby value
    obj.FilteredLoans = ko.computed( function() {
            var val = this.DocStandby();
            return ABLoans().filter( function( item ) { 
                return val && item.Type === val;
            } );
        }, obj);

    return obj;
};

vm.ABLoans( [
    { LoanNum: '1-DL', Type: 'DL' }, 
    { LoanNum: '2-DL', Type: 'DL' }, 
    { LoanNum: '1-SB', Type: 'SB' }, 
    { LoanNum: '2-SB', Type: 'SB' }, 
] );

vm.LoanDetails.push( buildRow(1, vm.ABLoans));
vm.LoanDetails.push( buildRow(2, vm.ABLoans));

ko.applyBindings(vm);