Question

在我的viewmodel中，我有大量的复选框绑定到普通字符串：

 .when('/{path:.aspx}', {
    templateUrl : 'src/ng-app/views/posts/post.html',
        controller : 'postController'
    })

到目前为止，我正在使用一个可观察数组来将复选框的true / false值解析为我需要的值：

<input type="checkbox" value="CODE" data-bind="checked: itemValue" />

如果有一个最简单和最短的方法，将复选框绑定到字符串值而不需要将其引用为var viewModel = { itemValue: ko.observableArray() };？

我需要的是字符串值，如果选中，如果未选中则为null。

由于我的viewmodel中有大量的observable，我会避免使用大量条件，例如itemValue[0]

使用observableArray小提琴：https://jsfiddle.net/wu470qup/

Answer 1

如果您想要轻松标记，则必须跟踪要在viewmodel中呈现的复选框。这是最简单的例子：

allValues是一个常规的字符串数组。每个字符串都会有一个复选框。 itemValues是一个带有复选框的字符串的可观察数组。 correctedValues是一个计算数组，每个未经检查的框都带有null，每个已检查的框都有一个字符串。

请注意，我使用$data来引用foreach中的当前字符串值。

var allValues = ["CODE", "ANOTHER_VAL"];
var itemValues = ko.observableArray();
var correctedValues = ko.computed(function() {
  var all = allValues;
  var checked = itemValues();

  return all.map(function(val) {
    return checked.indexOf(val) === -1 ? null : val;
  });
});

var viewModel = {
  allValues: allValues,
  itemValues: itemValues,
  correctedValues: correctedValues
};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<!-- ko foreach: allValues -->
<label>
  <input type="checkbox" data-bind="checked: $parent.itemValues, checkedValue: $data" />
  <span data-bind="text: $data"><span/>
</label>
<!-- /ko -->
<pre  data-bind="text: ko.toJSON($data, null, 2)"></pre>

更优雅的方法是为每个复选框创建视图模型。例如：

var CheckboxItem = function() {
  this.label = ko.observable("CODE");
  this.checked = ko.observable(false);
  this.id = ko.computed(function() {
    return this.checked() ? this.label() : null;
  }, this);
};

使用HTML模板：

<label>
   <input type="checkbox" data-bind="checked: checked" />
   <input data-bind="value: label" />
</label>

然后，在父视图模型中，您可以存储一个CheckBoxItem s的可观察数组，并具有一个包含所有id属性的计算数组。

将复选框绑定到Knockout.js中的纯字符串

1 个答案: