使用敲除计算函数更新文本

Posted 2023-03-27

【中文标题】使用敲除计算函数更新文本

【英文标题】：updating text using knockout computed function

【发布时间】：2018-02-24 11:51:17

【问题描述】：

在表格中，我有一个复选框绑定到可观察数组中的布尔值。

如果表格中的任何复选框被选中/未选中，我想更新一些文本并选中总数。

我无法触发计算函数，我尝试在下面的“if”语句中对数组和 location.isSelected 使用 ko.utils.unwrapObservable，我只是在错误的地方使用它吗？

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

<span class="text-left h5 ">Total Selected:</span><span data-bind="text: totalSelected" /> 


self.totalSelected = ko.computed(function () 
    var selected = 0;
    ko.utils.arrayForEach(self.SelectedLocations(), function (location) 
        if (location.isSelected == true) 
            selected = (+selected) + 1;
        
    );
    return selected;
, self).extend( notify: 'always' );

【参考方案1】：

其中一个问题是isSelected 被视为计算中的变量：location.isSelected == true。但是，如果您打算将复选框绑定到它，它必须是可观察的。

所以，我声明了一个函数来创建self.SelectedLocations 的子代：

var locationObservable = function() 
  var self = this;
  self.isSelected = ko.observable(false);
;

然后，您可以按如下方式更改计算变量中的计数：

if (loc.isSelected()) 
    selected++;
  

var locationObservable = function(selected) 
  var self = this;
  self.isSelected = ko.observable(selected);
;

var model = function() 
  var self = this;

  self.SelectedLocations = ko.observableArray();
  self.SelectedLocations.push(new locationObservable(false)); // Set the state of the checkbox here.
  self.SelectedLocations.push(new locationObservable(true));
  self.SelectedLocations.push(new locationObservable(false));

  self.totalSelected = ko.computed(function() 
    var selected = 0;
    ko.utils.arrayForEach(self.SelectedLocations(), function(loc) 
      if (loc.isSelected()) 
        selected++;
      
    );
    return selected;
  , self);
;

var vm = new model();
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach: SelectedLocations">
  <input type="checkbox" data-bind="checked: isSelected" />
</div>


<span class="text-left h5 ">Total Selected:</span><span data-bind="text: totalSelected" />

【讨论】：

感谢您的示例，我会尽快对其进行测试，看看会发生什么

我看不到 self.isSelected 从函数中获取 selected 值的位置

你问的是locationObservable吗？我刚刚将其更新为采用参数selected，该参数在向SelectedLocations 添加新项目时传递。比如：self.SelectedLocations.push(new locationObservable(false));。现在有意义吗？