javascript - How do I get the value of radio button option in my Knockout.js wizard? -


to simplify things, here fiddle: http://jsfiddle.net/fyusd/157/

<script id="choicetmpl" type="text/html">             <label><input type="radio" value="boughtbefore" data-bind="checked: radioselectedoptionvalue" />purchase products have bought before</label>             <br />             <label><input type="radio" value="searchproduct" data-bind="checked: radioselectedoptionvalue" />search product haven't purchased before</label>             <br /> 

i guess have couple questions. building wizard , need different execution steps depending on option user selects. question want know is, how value of radio button select?

like on step two, if select "purchase products have bought before" how can redirect question: create order guide or create order previous order (using radio buttons again)?

i can't figure out how value of select. furthermore, how skip steps depending on option choose? (fore example, go step 2 step 4 if select "want search product" in step 2)

lastly, there easy way change radio-button text match questions without create new template each?

sorry if many questions, , help...

  1. the value of radio button check passed function (typically observable, setting value) checked binding. see radio example in documentation.
  2. set computed state machine, , have value determine wizard page visible.
  3. label text bound model properties, didn't in example.

i've written simplistic example fiddle: http://jsfiddle.net/rqt46qw1/ note although example uses radio selection determine page show, computed can involve many variables need to.

<div data-bind="visible:wizpage() == '1'">     <h1>welcome</h1>     <label>page 2</label><input type="radio" value="p2" data-bind="checked:radioselected" />     <label>page 3</label><input type="radio" value="p3" data-bind="checked:radioselected" /> </div> <div data-bind="visible:wizpage() == '2'">     <h1>some option</h1>     <label>page 3</label><input type="radio" value="p3" data-bind="checked:radioselected" />     <label>start over</label><input type="radio" value="p1" data-bind="checked:radioselected" /> </div> <div data-bind="visible:wizpage() == '3'">     <h1>another option</h1>     <label>page 2</label><input type="radio" value="p2" data-bind="checked:radioselected" />     <label>start over</label><input type="radio" value="p1" data-bind="checked:radioselected" /> </div> 

javascript:

var viewmodel = (function () {     var radioselected = ko.observable();     var wizpage = ko.computed(function () {         if (radioselected() == 'p2') {             return '2';         }         else if (radioselected() == 'p3') {             return '3';         }         else {             return '1';         }     });     return {         wizpage: wizpage,         radioselected:radioselected     }; }());  console.debug("viewmodel:", viewmodel); ko.applybindings(viewmodel); 

Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -