如何使用knockoutjs绑定嵌套的输入

Question

我有一个从哪里我想要绑定每个单选按钮的所有嵌套的输入字段到它的选项，所以我可以显示结果，当它被点击。例如，如果选择了option1，则所显示的唯一结果将是option1的嵌套输入。我如何使用knockout.js和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>

什么是写一个正确的语法如果knockout.js语句块，检查单选按钮的价值？

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>

Answer 1

正如我在评论中提到，你应该做的是这样的。

视图模型：

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

查看：

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

工作拨弄here