Question

我有一个下拉框和一个单选按钮，它们是细节行的一部分。可以有多个详细信息行，因此可以有此单选按钮和下拉列表的多个实例。我有一个observablearray，是一个类型贷款的主要清单＆＃39; dl＆＃39;和＆＃39; sb＆＃39;。＆＃39; dl＆＃39;和＆＃39; sb＆＃39;是单选按钮上的值。当用户选择单选按钮时，我想在下拉框中填入一个贷款清单，其中列出了从收音机中选择了贷款类型的贷款（＆＃39; dl＆＃39; sb＆＃39;）按钮。因此，例如，如果用户选择具有＆＃39; sb值的单选按钮，＆＃39;然后我想填充所选详细信息行的下拉列表，只显示那些＆＃39; sb＆＃39;贷款类型（在observable中，名为DocStandBy的字段与贷款类型相关联，同一可观察对象中的LoanNum是要在下拉框中显示的贷款编号）。

我无法弄清楚如何根据单选按钮上的单击事件将observablearray的已过滤子集返回到下拉框。下面的代码显然不起作用，但确实表明了我想要做的事情。如何更改以下代码才能使其正常工作？

查看 -

                         <tbody data-bind="foreach: LoanDetails()">
                        <tr style="border: none">
                            <td colspan="2">
                                <input type="radio" data-bind="checked: DocStandby, attr: { 'name': SeedID(), 'value': 'DL' }, click: $parent.SaveDocStand($data)" />
                                Documentary
                                    <input type="radio" data-bind="checked: DocStandby, attr: { 'name': SeedID(), 'value': 'SB' }, click: $parent.SaveDocStand($data)" />
                                Stand By

                            </td>
           </tr>
           <tr style="border: none">
                            <td style="font-weight: bold">AB Loans:</td>
                            <td>
                                <select id="ddlLoans" data-bind=" optionsCaption: 'Choose...', 
                options: $parent.ABLoans($parent.dlOrSB() == $data.DocStandby()), optionsText: 'LoanNum',
                    optionsValue: 'LoanNum'">
                                </select>
            </td>
                        </tr>
           </tbody>

VIEWMODEL已编辑 -

  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();



        }
 };

Answer 1

LoanDetails数组的每个元素都需要有一个单独的计算器，它根据所选的DocStandby返回ABLoans的过滤数组。

您会注意到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>

<强> JAVASCRIPT

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);

有关上述代码

，请参阅此jsFiddle

如何根据单选按钮选择将observablearray的已过滤子集返回到下拉框

1 个答案: