knockout.js中的队列计时器

Posted 2021-05-05

对客户队列计时器实施knockout绑定最简单的方法是什么？我没有那么好的淘汰赛，我的搜索只发现倒计时器的问题。我不应该从哪里开始。自定义绑定？手动刷新？每个建议都表示赞赏。

我有一个包含我的客户模型的可观察数组，客户模型的一个属性是EnqueueTime，其中包含客户进入队列时的时间。我想显示客户在队列中花费的时间（EnqueueTime和当前时间之间的时间跨度）。

到目前为止，我只是展示了EnqueueTime的价值。这只是我目前使用的测试代码的片段，稍后它将获得一些合理的表单和数据：

this.Customers = ko.observableArray();    
var vm = {};
vm.CustomerNote = "Test";
vm.EnqueueTime = Date.now();
vm.Priority = true;
this.Customers.push(vm);

并且观点：

<div id="customerQueue" class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th></th>
                    <th>Note</th>
                    <th>Time in queue</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: Customers">
                <tr data-bind="css: {danger: Priority}">
                    <td>
                        <span data-bind="visible: Priority" class="glyphicon glyphicon-warning-sign"></span>
                    </td>
                    <td data-bind="text: CustomerNote"></td>
                    <td data-bind="text: EnqueueTime"></td>
                </tr>
            </tbody>
        </table>
    </div>

答案

如果一次只有一些活动对象，那么快速的解决方案就是使用计算的observable。但是，由于没有其他更改，您将需要一个可以独立更新的外部observable来刷新显示的值。

这是一个简单的例子：

var vm = { models: ko.observableArray() };

var trigger = ko.observable(null).extend({ notify: 'always'});

class Model {
  constructor(time) {
    this.EnqueueTime = time;
    this.Elapsed = ko.computed(() => {
        trigger(); // read observable to be able to update when it updates
      var date = new Date(null);
        date.setTime(new Date() - this.EnqueueTime);
      return date.toISOString().substr(11, 8);
    });
  }
}

vm.models.push(new Model(new Date()));
vm.models.push(new Model(new Date(2018, 1, 1)));

setInterval(() => trigger(null), 1000);

ko.applyBindings(vm);

小提琴：

https://jsfiddle.net/AlexPaven/vnk92gt7/

如果我能进一步帮助，请告诉我。