如何使用 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 中编写检查单选按钮值的 if 语句块的正确语法是什么？

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

正如我的 cmets 中提到的，你应该这样做。

视图模型：

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