Question

我概述了一些partyevents（有些在同一天）。我需要在当前日期和时间对它们进行排序。事件完成后，需要进入旧事件列表。

我认为这可以做到的是，根据当前时间，当事件在过去或将来时，某些类正在添加javascript。它需要通过标题或其他属性知道事件的日期和时间。（这样我可以使用display：none为upcomming事件列表添加过去的类，并在旧事件上添加display：block。）

Upcomming party events： - 列在这里

旧事件： - 列在这里

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

Answer 1

你应该明确地看看knockout.js @ http://knockoutjs.com/examples/betterList.html

一旦你知道它是如何工作的，你就会很简单地爱它。

编辑：

更多信息：您将使用observableArrays，它会在您修改后立即触发knockout为您更改HTML（例如排序） - 这真是太棒了吗？

EDIT2：

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

因此，knockout适用于绑定到视图的viewmodel。在这个viewmodel中你会有一个partyList（在我的例子中称为party），它是一个observableArray。视图模型可以格式化为：

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），并显示名称和日期。

如果用户单击该按钮，则会调用sort方法。关于淘汰赛的好处是无论阵列中的对象是什么顺序，都将在HTML中准确表示，而无需您执行任何其他操作，然后单击按钮。我提供的代码就是你需要的一切（当然包括淘汰剧本），以使其发挥作用。

您想要添加新派对吗？没问题，在viewmodel中添加一个add方法，该方法会为聚会添加一方，它将出现在HTML中。

Answer 2

我认为您应该使用PHP对它们进行排序。使用javascript非常复杂，因为你无法将元素移动到DOM中的另一个位置。

<div id="events">
//elements are positioned here
</div>
<div id="new-events">
//you can't simply move the elements to here
</div> 
<div id="new events">
//or to here
</div>

但是你可以将PHP与一系列事件一起使用。

<?php 
$events = array('2014-11-1' => array('title' => 'Haloween Party', 'date' => '2014-11-1'), '2014-10-10' => array('title' => 'Table dance party', 'date' => '2014-10-10'));
function only_new($name) {
    $date = strtotime($name['date']);
    return $date > time() ? $name : false;
}
$newEvents = array_filter($events, "only_new");
$oldEvents = array_filter($events, "only_old");
function only_old($name) {
    $date = strtotime($name['date']);
    return $date < time() ? $name : false;
}

echo '<hr>';
echo 'Old events:<br />';
var_dump($oldEvents);
echo '<br />';
echo '<hr>New events:<br />';
var_dump($newEvents);
echo '<hr>';
?>

希望它有所帮助;）

Answer 3

您可以使用Date（）作为引用here来获取JavaScript中的当前日期。

然后，您可以检查事件的日期是在当前日期之前还是之后，并根据需要添加要隐藏的类。

在JavaScript的排序方面，重建方向盘毫无意义，List.js对我来说非常棒。使用简单，重量极轻。

在过去或将来的日期添加课程

3 个答案: