敲除 - 基於單選按鈕的選擇

Question

目的

濾波器陣列採取用戶選擇的測試組，並過濾​​Models.scenarios只顯示了適用於用戶的選擇的方案。一旦正確的場景列表顯示給用戶，他們就選擇他們的場景並開始測試。

最終的結果我想testGroup（如1,2,3,4,5）和一個場景號碼（1,2,3等）

我明白，我應該使用arrayFilter和計算變量來實現這一點，但我的實現每次都失敗。

小提琴

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> 

視圖模型

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。