我需要帮助在 JsViews 模板中链接日期对象

Question

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

我正在使用 JSViews 进行数据绑定，它在应用程序中运行良好，除了那个日期，我不明白！！我创建了一个代表这个想法的 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);
}

我添加了一行我在没有数据绑定的情况下写入值以显示值已更新..

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/