javascript - 添加过去或 future 日期的类(class)

Question

我对一些派对事件有一个概述(有些是在同一天举行的)。 我需要按当前日期和时间对它们进行排序。 当一个事件完成后，它需要进入旧事件列表。

我认为如何做到这一点是当事件基于当前时间发生在过去或将来时，用 javascript 添加一些类。它需要通过标题或其他属性了解事件的日期和时间。 (这样，当为即将发生的事件列表添加过去的类时，我可以使用 display:none ，并且在旧事件上添加 display:block 。)

即将举行的派对事件: - 在此列出

旧事件: - 在此列出

我搜索了allot，但找不到任何有用的脚本。 也许有人可以帮助我？

Answer 1

你绝对应该看看knockout.js @ http://knockoutjs.com/examples/betterList.html

一旦您知道它是如何工作的，您就会爱上它。

编辑:

更多信息: 您将使用 observableArrays，一旦您修改(例如排序)，它就会触发淘汰赛来更改 HTML - 这太棒了，对吧？

编辑2:

堆栈溢出也对淘汰赛有很多支持，因此问题很可能会得到解答!

因此，淘汰赛适用于绑定(bind)到 View 的 View 模型。 在这个 View 模型中，您将有一个 partyList (在我的示例中称为 party)，它是一个 observableArray。 View 模型可以格式化如下:

var viewmodel = function(){
    self = this;        
    self.parties = ko.observableArray([{ name: "Halloween", date: "2014/10/31" },{ name: "Christmas", date: "2014/12/25" }]);
    self.sortParties = function(){
        self.sortParties().sort(function(a, b){
            //here comes the sorting logic you want to apply
        }
    });
};

ko.applyBindings(new viewmodel());

HTML 可能是这样的:

<div data-bind="foreach: parties">
    <div data-bind="text: name" />
    <div data-bind="text: date" />
</div>
<button data-bind="click: sort">Sort</button>

此 HTML 首先会为 party 数组中的每个事件呈现两个内部 div(因此在本例中为 2)并显示名称和日期。

如果用户单击该按钮，则会调用排序方法。剔除的好处是，无论数组中的对象的顺序如何，都将在 HTML 中准确表示，而无需执行任何其他操作，然后单击按钮。我提供的代码是您需要的一切(当然包括淘汰脚本)以使其正常工作。

您想添加新队伍吗？没问题，向 View 模型添加一个 add 方法，该方法会将一方添加到各方中，并且它将出现在 HTML 中。