javascript - Knockout - 基于单选按钮选择的过滤器数组

Question

目标

采用用户选择的测试组并过滤 Models.scenarios 以仅显示适用于用户选择的场景。一旦向用户显示正确的场景列表，他们就会选择自己的场景并开始测试。

最终结果我想要一个测试组(例如 1,2,3,4,5)和一个场景编号(1,2,3 等...)

我知道我应该使用 arrayFilter 和计算变量来实现此目的，但我的实现每次都会失败。

fiddle

http://jsfiddle.net/winsconsinfan/ffcudgrf/4/

查看

<p>Welcome to our Usability testing application.</p>
<p>
    <label class="control-label">To which Test Group do you belong?</label> <em>Found in your invitation email.</em>
</p>
<label class="radio-inline">
    <input type="radio" name="testGroupSelection" value="1" data-bind="checked: testGroupNumber">1</label>
<label class="radio-inline">
    <input type="radio" name="testGroupSelection" value="2" data-bind="checked: testGroupNumber">2</label>
<label class="radio-inline">
    <input type="radio" name="testGroupSelection" value="3" data-bind="checked: testGroupNumber">3</label>
<label class="radio-inline">
    <input type="radio" name="testGroupSelection" value="4" data-bind="checked: testGroupNumber">4</label>
<label class="radio-inline">
    <input type="radio" name="testGroupSelection" value="5" data-bind="checked: testGroupNumber">5</label>
<div data-bind="visible: testGroupNumber">
    <p>You belong to Test Group <span data-bind="text: testGroupNumber"></span>
    </p>
    <p>And you'll be testing which scenario?</p>
    <div data-bind="foreach: Models.scenarios">
        <label data-bind="text: scenarioDescription">
            <input type="radio" name="scenarioSelection" data-bind="checked: selectedScenario()" />
        </label>
    </div>
</div>

View 模型

var Models = window["Models"] = {};

(function () {
    Models.ViewModel = function () {
        var self = this;
        self.testGroupNumber = ko.observable();
        self.selectedScenario = ko.observable();

        self.filteredScenarios = ko.computed(function () {
            //code here
        });
    }

    Models.scenarios = ko.observableArray([{
        id: 's1q1',
        testGroup: 1,
        scenarioNumber: 1,
        scenarioDescription: "It is nearing the end of the plan year for your Health Care FSA and you want to check your available balance. Find how much money you have left in your account."
    }, {
        id: 's1q2',
        testGroup: 1,
        scenarioNumber: 2,
        scenarioDescription: "You can’t remember how much you elected for your Health Care FSA. Find how much you elected for the current plan year."
    }, {
        id: 's1q3',
        testGroup: 1,
        scenarioNumber: 3,
        scenarioDescription: "You received a check in the mail from Employee Benefits Corporation and you don’t know why. Find where you can view an explanation."
    }, {
        id: 's1q4',
        testGroup: 1,
        scenarioNumber: 4,
        scenarioDescription: "You want your spouse to have the ability to call and discuss your account on your behalf with Employee Benefits Corporation. You’ll have to fill out an authorization document to do this. Find where that is located."
    }, {
        id: 's1q5',
        testGroup: 1,
        scenarioNumber: 5,
        scenarioDescription: "You need to purchase more parking passes so you can park your vehicle while at work. You would like to pay for these passes pre-tax. Find where you can place an order for parking passes."
    }, {
        id: 's2q1',
        testGroup: 2,
        scenarioNumber: 1,
        scenarioDescription: "You discovered an old receipt in your basement and can’t remember if you already submitted a claim for the expense for your Health Care FSA. Find where you can view the claims you have submitted in the past. "
    }, {
        id: 's2q2',
        testGroup: 2,
        scenarioNumber: 2,
        scenarioDescription: "You recently visited the doctor’s office and want to submit a claim to be reimbursed from your Health Care FSA account for the expense. Find where you can submit this information."
    }, {
        id: 's2q3',
        testGroup: 2,
        scenarioNumber: 3,
        scenarioDescription: "You recently received a reimbursement check in the mail and are unsure which claims the payment is for. Find where you can view a breakdown of claims that make up the payment check."
    }, {
        id: 's2q4',
        testGroup: 2,
        scenarioNumber: 4,
        scenarioDescription: "You have $100.00 left in your Health Care FSA account that you must use by the end of the year. You want to know what types of expenses you can submit to use up this money. Find what medical expenses you can submit for reimbursement."
    }, {
        id: 's2q5',
        testGroup: 2,
        scenarioNumber: 5,
        scenarioDescription: "You are tired of having to pay your doctor’s bills yourself after you receive a check from Employee Benefits Corporation. You would prefer to have the reimbursements sent directly to your doctor’s office. Find where you can sign up for this service."
    }, {
        id: 's3q1',
        testGroup: 3,
        scenarioNumber: 1,
        scenarioDescription: "You enrolled in the Simply HSA plan for the first time and need to check your account balance. Find where you can log in to HSA Bank."
    }, {
        id: 's3q2',
        testGroup: 3,
        scenarioNumber: 2,
        scenarioDescription: "You recently moved into a new house and want to notify Employee Benefits Corporation of your new address so your reimbursement checks are sent to the correct place. Find where you can update your address."
    }, {
        id: 's3q3',
        testGroup: 3,
        scenarioNumber: 3,
        scenarioDescription: "You can’t locate what you are looking for on the Employee Benefits Corporation menu and would like to call customer service. Find Employee Benefits Corporation’s phone number."
    }, {
        id: 's3q4',
        testGroup: 3,
        scenarioNumber: 4,
        scenarioDescription: "You recently swiped your Benny Benefits Card at your dentist’s office and were notified by Employee Benefits Corporation that you must submit documentation in order to be reimbursed from your Health Care FSA account for the expense. Find where you can submit this information."
    }, {
        id: 's3q5',
        testGroup: 3,
        scenarioNumber: 5,
        scenarioDescription: "You want more details on services that Employee Benefits Corporation offers. Find where you can view flyers and brochures."
    }, {
        id: 's4q1',
        testGroup: 4,
        scenarioNumber: 1,
        scenarioDescription: "This is the first time you have participated in the EBC HRA Plan. Find how much you are responsible for paying out of pocket. "
    }, {
        id: 's4q2',
        testGroup: 4,
        scenarioNumber: 2,
        scenarioDescription: "You recently had your identify stolen and want to update your user name and password as a precaution. Find where you can do this."
    }, {
        id: 's4q3',
        testGroup: 4,
        scenarioNumber: 3,
        scenarioDescription: "You are tired of receiving paper checks in the mail and would like your reimbursements to be deposited directly into your bank account. Find where you can sign up for this service."
    }, {
        id: 's4q4',
        testGroup: 4,
        scenarioNumber: 4,
        scenarioDescription: "You are having issues using your Benny Benefits Card at the pharmacy and you wonder what’s wrong with your card. Find your card status."
    }, {
        id: 's5q1',
        testGroup: 5,
        scenarioNumber: 1,
        scenarioDescription: "You recently received a reimbursement check for a claim that you submitted. The amount of the check is not what you expected. Find where you can view an explanation of why you didn’t receive a full payment."
    }, {
        id: 's5q2',
        testGroup: 5,
        scenarioNumber: 2,
        scenarioDescription: "You recently got a new email address and want to make sure that all communication from Employee Benefits Corporation is sent via email. Find where you can update this information."
    }, {
        id: 's5q3',
        testGroup: 5,
        scenarioNumber: 3,
        scenarioDescription: "You submitted a claim to Employee Benefits Corporation yesterday and want to know when you will be reimbursed. Find when you can expect a reimbursement check to be issued."
    }, {
        id: 's5q4',
        testGroup: 5,
        scenarioNumber: 4,
        scenarioDescription: "You have been notified by your employer that it is time to enroll in the upcoming year’s flexible spending account plan. Find where you can make a new election."
    }, {
        id: 's5q5',
        testGroup: 5,
        scenarioNumber: 5,
        scenarioDescription: "You received a letter from Employee Benefits Corporation explaining that the documentation you submitted with your last claim was illegible. Find where you can provide a new copy of the documentation for the claim."
    }, ]);
})();

var myViewModel = new Models.ViewModel();
ko.applyBindings(myViewModel);

Answer 1

过滤!试试这个:

self.filteredScenarios = ko.computed(function () {
    return Models.scenarios().filter(function (i) { 
        return i.testGroup == self.testGroupNumber();
    });
});

检查working fiddle .