javascript - 我需要帮助来链接 JsViews 模板中的日期对象

Question

我正在编写一个小型 javascript 游戏...为了设置游戏中时间，我有一个变量来保存当前游戏中的日期和时间，我想显示此日期和每秒，以小时为单位增加该日期。

我正在使用 JSViews 进行数据绑定(bind)，它在应用程序中运行良好，除了该日期之外，我不明白!我创建了一个 JSFiddle 来代表这个想法:

http://jsfiddle.net/ClaudeVernier/w8cwkarr/5/

try {
    var tmplDates = $.templates("#tmplDates");
    tmplDates.link("#gameSet", model);

    gameLoop();
}
catch(e) {
    alert(e);
}

我有一个包含日期和整数的数据模型。 我有一个模板，显示使用转换器的数据模型

<script id="tmplDates" type="text/x-jsrender">
    <hr /> <span data-link="{toDateString:gameDate}"></span>
    <hr /> <span data-link="{toTimeString:gameDate}"></span>
    <hr /> <span data-link="{toString:gameInt}"></span>
</script>

每隔一秒，我都会使用 Observable 方法更新日期和整数。整数得到更新，但日期没有更新!

function gameLoop() {
    var tDate = model.gameDate;
    tDate.addHours(4);

    $.observable(model).setProperty("gameDate", tDate);

    var tInt = model.gameInt + 1;
    $.observable(model).setProperty("gameInt", tInt);

    $("#lastUpdate").text( gameDateString(model.gameDate, 0) + "-" + gameDateString(model.gameDate, 6) + " - [" + model.gameInt + "]");

    window.setTimeout(gameLoop, 1000);
}

我添加了一行，在其中写入值而不进行数据绑定(bind)，以显示值已更新。

Answer 1

这里的问题是您每次都传递相同的日期对象。

var tDate = model.gameDate;
tDate.addHours(4);
...
$.observable(model).setProperty("gameDate", tDate);

当您设置与该路径上的当前值不同的值时，

JsViews setProperty() 会引发“更改事件”。 (即，如果您修改模型上 gameDate 的值)。这里的值与模型上已有的日期对象相同，因此不会有更改事件，也不会更新值。

因此，一个修复方法是每次都将 tDate 创建为一个新对象:

var tDate = new Date(model.gameDate);
tDate.addHours(4);
...
$.observable(model).setProperty("gameDate", tDate);

另一个修复方法是使模型上的 gameDate 成为字符串 - Date.valueOf()。

我在这里从你的 jsfiddle 创建了一个更新:

http://jsfiddle.net/w8cwkarr/6/