how to bind nested inputs using knockoutjs

Question

I have a from where I want to bind all the nested input fields of each radio button to it's option so I can show the results when it's clicked. For example if option1 is selected the only results shown would be nested inputs of option1. How can I do it using knockout.js and jQuery?

<div id="results" class="jumbotron">
  <!-- ko if : option1 -->
  <ul data-bind="text: input1"></ul>
  ...
  <!-- /ko -->
  <!-- ko if : option2 -->
  ...
  <!-- /ko -->
  <!-- ko if : option2 -->
  ...
  <!-- /ko -->
</div>

What is the right syntax to write an if statement block in knockout.js that checks radio buttons value?

var viewModel = {
  optionRadio: ko.observable("option1"),
  input1: ko.observable(),
  input2: ko.observable(),
  input3: ko.observable(false),
  input4: ko.observable(false),
  optionValues: ["Alpha", "Beta", "Gamma"],
  selectedOptionValue: ko.observable("Gamma")
};

ko.applyBindings(viewModel);

var jsonData = ko.toJSON(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results" class="jumbotron">
<!-- ko if : option1 -->
<ul data-bind="text: input1"></ul>
<ul data-bind="text: input2"></ul>
<ul>
  <!-- ko if : input3 -->
  <li data-bind="text : input3"></li>
  <!-- /ko -->
  <!-- ko if : input4 -->
  <li data-bind="text : input4"></li>
  <!-- /ko -->
</ul>
<ul data-bind="text: selectedOptionValue"></ul>
<!-- /ko -->
<!-- ko if : option2 -->
<!-- /ko -->
<!-- ko if : option2 -->
<!-- /ko -->
</div>

<hr>
<form>
  <div class="form-group">
    <div class="radio">
      <label>
        <input type="radio" name="optionRadio" value="option1" data-bind="checked: optionRadio" />Option 1
      </label>
      <div class="jumbotron">
        <div class="form-group">
          <label>Input 1</label>
          <input data-bind="textInput: input1" type="text" class="form-control" />
        </div>
        <div class="form-group">
          <label>Input 2</label>
          <input data-bind="textInput: input2" type="text" class="form-control" />
        </div>
        <div class="checkbox">
          <label>
            <input data-bind="checked: input3" type="checkbox" />option 1</label>
        </div>
        <div class="checkbox">
          <label>
            <input data-bind="checked: input4" type="checkbox" />option 2</label>
        </div>
        <select data-bind="options: optionValues, value: selectedOptionValue"></select>
      </div>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="optionRadio" value="option2" data-bind="checked: optionRadio" />Option 2
      </label>
      <ul>Some content here</ul>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="optionRadio" value="option3" data-bind="checked: optionRadio" />Option 3
      </label>
      <ul>Some other content here</ul>
    </div>
</form>

something like this you looking for jsfiddle.net/74dh736s/28 . cheers — super cool
– super cool, Commented Feb 24, 2015 at 8:04
@supercool this is great. Now how can I replace this:  <ul data-bind="text: input1"></ul> ...  to show the result of user inputs on the same page? — Saeed Abbaspour
– Saeed Abbaspour, Commented Feb 24, 2015 at 8:11
yes you should be doing like this . sample here jsfiddle.net/74dh736s/29 . cheers — super cool
– super cool, Commented Feb 24, 2015 at 9:26

super cool · Accepted Answer · 2015-02-24 09:58:41Z

1

As mentioned in my comments you should be doing like this .

ViewModel:

var viewModel = function () {
    var self = this;
    self.optionRadio = ko.observable();
    self.input1 = ko.observable();
    self.input2 = ko.observable();
    self.try1 = ko.observable();
    self.try2 = ko.observable();
    self.try3 = ko.observable();
    self.input3 = ko.observable(false);
    self.input4 = ko.observable(false);
    self.optionRadio.subscribe(function (s) {
        if (s == 'option1') {
            self.try1(true);
            self.try2(false);
            self.try3(false);
        } else if (s == 'option2') {
              self.try1(false);
            self.try2(true);
            self.try3(false);
        } else {
            self.try1(false);
            self.try2(false);
            self.try3(true);
        }
    });
};
ko.applyBindings(new viewModel());

View :

        <div class="radio">
            <label>
                <input type="radio" name="optionRadio" value="option2" data-bind="checked: optionRadio" />Option 2</label>
            <ul data-bind="visible:try2">Some content here</ul>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optionRadio" value="option3" data-bind="checked: optionRadio" />Option 3</label>
            <ul data-bind="visible:try3">Some other content here</ul>
        </div>

Working fiddle here

edited Feb 24, 2015 at 9:58

answered Feb 24, 2015 at 9:29

super cool

6,0653 gold badges34 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Saeed Abbaspour Over a year ago

do you have any idea why the input1 and input2 are not bind to the View?

super cool Over a year ago

Because of textInput i guess try using value binding with events i.e valueUpdate:'keyup' etc (updated fiddle) cheers

Collectives™ on Stack Overflow

how to bind nested inputs using knockoutjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related