淘汰赛 Observable 和时间

Question

我在我的项目中使用 Knockout 和 Typescript，我需要在视图模型中构建三个具有 datetime 类型的字段。满足条件时需要更新这些内容。

我有什么：

查看：

    <div data-bind="if: step1CompleteY">
    <span data-bind="text: step1CompleteY" />
    <input type="datetime" data-bind="value: timestampSt1()" />
</div>
<div data-bind="if: step12Complete">
    <span data-bind="text: step12Complete" />
    <input type="datetime" data-bind="value: timestampSt2()" />
</div>
<div data-bind="if: step23Complete">
    <span data-bind="text: step23Complete" />
    <input type="datetime" data-bind="value: timestampSt3()" />
</div>

查看模型：

myTimestamp = ko.observable(new Date().getDate() + "/" + new Date().getMonth() + "/" + new Date().getFullYear() + " " + new Date().getHours() + ":" + new Date().getMinutes());    
timestampSt1 = ko.observable(this.myTimestamp);
timestampSt2 = ko.observable(this.myTimestamp);
timestampSt3 = ko.observable(this.myTimestamp);
step1CompleteY = ko.computed({
    read: () => this.objectChecks.exportValue() === 'Yes' 
})
step12Complete = ko.computed({
    read: () => { return this.objectChecks.exportValue() === 'No' || this.objectChecks.rfqStatusValue() === 'Approved' }
})
step23Complete = ko.computed({
    read: () => { return (this.objectChecks.indemnityValue() === 'Yes' || this.objectChecks.indemnityValue() === 'N/A' || this.objectChecks.rfqStatusValue() === "Denied") }
})

这里的问题是，日期时间出现了，我不知道如何使用“setTimeout”来处理这个 observables，基本上只有在满足条件时才刷新那个时间。

有什么想法吗？

Answer 1

按以下方式绑定您的值。如果3个时间戳之间没有关系。 我将声明不同的时间戳以避免混淆。

myTimestamp1 = ko.observable(new Date().getDate() + "/" + new Date().getMonth() + "/" + new Date().getFullYear() + " " + new Date().getHours() + ":" + new Date().getMinutes()); 

myTimestamp2 = ko.observable(new Date().getDate() + "/" + new Date().getMonth() + "/" + new Date().getFullYear() + " " + new Date().getHours() + ":" + new Date().getMinutes());  

myTimestamp3 = ko.observable(new Date().getDate() + "/" + new Date().getMonth() + "/" + new Date().getFullYear() + " " + new Date().getHours() + ":" + new Date().getMinutes());   

在此处定义为完成当前新时间戳的步骤值时计算的值，并且不会重复页面刷新时的值。

step1CompleteY = ko.computed({
    read: () => this.objectChecks.exportValue() === 'Yes';

    myTimestamp1 = ko.observable(new Date().getDate() + "/" + new Date().getMonth() + "/" + new Date().getFullYear() + " " + new Date().getHours() + ":" + new Date().getMinutes()); 
})

step12Complete = ko.computed({
    read: () => { return this.objectChecks.exportValue() === 'No' || this.objectChecks.rfqStatusValue() === 'Approved' }

myTimestamp2 = ko.observable(new Date().getDate() + "/" + new Date().getMonth() + "/" + new Date().getFullYear() + " " + new Date().getHours() + ":" + new Date().getMinutes());  
    })

step23Complete = ko.computed({
    read: () => { return (this.objectChecks.indemnityValue() === 'Yes' || this.objectChecks.indemnityValue() === 'N/A' || this.objectChecks.rfqStatusValue() === "Denied") }



myTimestamp3 = ko.observable(new Date().getDate() + "/" + new Date().getMonth() + "/" + new Date().getFullYear() + " " + new Date().getHours() + ":" + new Date().getMinutes()); 
    })

这里是否会反映每个时间戳的值。并且刷新问题将得到解决

timestampSt1 = ko.observable(myTimestamp1);
timestampSt2 = ko.observable(myTimestamp2);
timestampSt3 = ko.observable(myTimestamp3);

Answer 2

Knockout 的第一条规则 是 observables 是函数。 myTimestamp是一个函数，所以当你写

timestampSt1 = ko.observable(this.myTimestamp);
timestampSt2 = ko.observable(this.myTimestamp);
timestampSt3 = ko.observable(this.myTimestamp);

您已经定义了三个存储函数的可观察对象，而不是时间戳值。

试试这个：

// don't call new Date several times - there is a very small chance the value will change between each call.
var d = new Date();
// create a string from the date
var timestamp = d.getDate() + "/" + d.getMonth() + "/" + d.getFullYear() + " " + d.getHours() + ":" + d.getMinutes());
myTimestamp = ko.observable(timestamp);
timestampSt1 = ko.observable(timestamp);
timestampSt2 = ko.observable(timestamp);
timestampSt3 = ko.observable(timestamp);