Question

好的，我发现了问题，但没有找到解决方案。如果我使用以下代码，那么事情就会正常运行：

<div class="col-xs-2">
    <div>
        <label>
            <input type="radio" name="timestamp" id="option1" class="btn btn-default" value="L" data-bind="checked: chosenCompare, event: {click: conditionChange}">L</input>
        </label>
        <label>
            <input type="radio" name="timestamp" id="option2" class="btn btn-default" value="E" data-bind="checked: chosenCompare, event: {click: conditionChange}">E</input>
        </label>
        <label>
            <input type="radio" name="timestamp" id="option3" class="btn btn-default" value="M" data-bind="checked: chosenCompare, event: {click: conditionChange}">M</input>
        </label>
    </div>
</div>

基本上我所做的就是删除了Bootstrap / Conquer的外观，所以Bootstrap / Conquer和Knockout之间的交互存在问题。

以下原帖......

我有以下Knockout使用的模板片段，以及一些Bootstrap：

<div class="col-xs-3">
  <select class="form-control"
          data-bind="options: $parent.availableChannels(),
            optionsCaption: 'Choose one...',
            value: chosenChannel, event: {change: $parent.conditionChange}"></select>
</div>
<div class="col-xs-2">
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary">
          <input type="radio" name="timestamp" id="option1" class="btn btn-default" value = "L" data-bind="value: chosenCompare, event: {change: $parent.conditionChange}">L</input>
      </label>
      <label class="btn btn-primary">
          <input type="radio" name="timestamp" id="option2" class="btn btn-default" value = "E" data-bind="value: chosenCompare, event: {change: $parent.conditionChange}">E</input>
      </label>
      <label class="btn btn-primary">
          <input type="radio" name="timestamp" id="option3" class="btn btn-default" value = "M" data-bind="value: chosenCompare, event: {change: $parent.conditionChange}">M</input>
      </label>
    </div>
</div>
<div class="col-xs-2">                      
    <input id="number-picker" type="text" value="" name="number-picker" style="text-align: center" data-bind="value: chosenNumber, event: {change: $parent.conditionChange}" >
</div>

VM.model.channelCondition = function channelCondition(data) {
  var o = this
  o.base = VM.model.condition;
  o.base(data);
  o.chosenChannel = ko.observable();
  o.chosenCompare = ko.observable();
  o.chosenNumber = ko.observable();
  o.isReady = function() {
    return o.chosenChannel() !== undefined && o.chosenCompare() !== undefined && o.chosenNumber() !== undefined;
  }
}

VM.conditionChange = function(data, event) {
  console.log("conditionChange data:\n\t ", data);
  console.log("conditionChange event:\n\t ", event);
  console.log("chosenChannel = ", data.chosenChannel());
  console.log("chosenCompare = '" + data.chosenCompare() + "'");
  console.log("chosenNumber = ", data.chosenNumber());
  console.log("isReady() = ", data.isReady());
  return true;
}

我对selectedChannel和chosenNumber的绑定工作正常，但是我已经尝试了几个小时来敲除将单选按钮绑定到selectedCompare，没有运气。

在我点击任何单选按钮之前，selectedCompare必然是未定义的，正如我所料。当我单击其中一个单选按钮时，将调用conditionChange，并且selectedCompare（）的值将从undefined更改为''（空字符串）。

我已经尝试使用已检查的绑定，但这根本没有任何效果，至少值绑定会改变某些内容。

我在这里错过了一些简单的东西吗？

Answer 1

使用带有单选按钮的checked绑定，并绑定到click事件而不是change事件，或chosenCompare()将返回之前的值而不是当前值。但是，您需要确保conditionChange方法返回true，以便默认点击处理程序仍然运行。

＆＃13;

var viewModel = {
  chosenCompare: ko.observable(),
  conditionChange: function() {
    alert('chosenCompare is now: ' + viewModel.chosenCompare());
    return true;
  }
};

ko.applyBindings(viewModel);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="timestamp" id="option1" class="btn btn-default" value="L" data-bind="checked: chosenCompare, event: {click: conditionChange}">L</input>
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="timestamp" id="option2" class="btn btn-default" value="E" data-bind="checked: chosenCompare, event: {click: conditionChange}">E</input>
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="timestamp" id="option3" class="btn btn-default" value="M" data-bind="checked: chosenCompare, event: {click: conditionChange}">M</input>
  </label>
</div>

＆＃13;

Knockout Binding始终返回空字符串

1 个答案: