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") }
})

这里的问题是，日期时间出现了，我不知道如何使用＆＃34; setTimeout＆＃34;与这些观察者一起工作，基本上只有在满足条件时才能刷新时间。

有什么想法吗？

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

淘汰观察和时间

2 个答案: