Knockout Observable 和时间

Question

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

我有：

查看：

    <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" 来处理这个可观察对象，基本上只有在满足条件时才刷新那个时间。

有什么想法吗？

Answer 1

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

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

您已经定义了三个 observable，它们存储函数，而不是时间戳值。

试试这个：

// 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);

Answer 2

按照以下方式绑定您的值。如果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);

Knockout Observable 和时间

Knockout Observable and Time

knockout.js

typescript