Emberjs 使用 sortProperties 按日期对内容进行排序

2024-01-10

我正在尝试使用 Emberjs排序属性按日期对内容进行排序jsfiddle http://jsfiddle.net/CmtpX/2/。我的模型有一个开始时间我尝试排序的属性,但没有成功。然后我创建了一个名为的计算属性今日活动在返回与传入日期匹配的事件的控制器中,我尝试对其进行排序,但它也不起作用。我想做的就是列出同一天发生的事件,但以这样的方式,一天中发生的事件的时间按升序排序,例如,发生的事件10am应该列在发生的事情之前12pm.

这是jsfiddle http://jsfiddle.net/CmtpX/2/

该模型:

App.TimeSlot = DS.Model.extend( {
  startTime: DS.attr('date'),
  endTime: DS.attr('date'),
  allDay: DS.attr('boolean'),
  soldOut: DS.attr('boolean')
});

控制器

App.TimeSlotController = Ember.ArrayController.extend({
 content: [ ],

 sortProperties: ['todayEvent'],
 sortAscending: true,

 day: Ember.A(['2013-10-25']),

 todayEvent: function(){
  self = this;
  u = self.get('content'); 
  console.log('u', u);
  kl =  u.filter(function(availableSlot) {
   console.log ('a', availableSlot.get('startTime') );

 return (moment(availableSlot.get('startTime')).format("YYYY-MM-DD") ==  self.get('day').toString() );
  }); 

   return kl;  
 }.property('day', 'content@each'),


});

夹具适配器

App.TimeSlot.FIXTURES = [

  {
    id: 3,
    startTime: moment.utc('2013-10-25T12:30:00+01:00',"YYYY-MM-DD HH:mm:ss" ),    
    allDay: true
  },

 {
   id: 4,
   startTime: moment.utc('2013-10-25T10:10:00+01:00',"YYYY-MM-DD HH:mm:ss" ),    
   allDay: true
},

 {
  id: 5,    
  startTime: moment.utc('2013-10-23 00:00 +01:00', "YYYY-MM-DD HH:mm"),    
  allDay: true
 }
];

我设法解决了@edu,但感谢您的帮助。你可以看到一个正在运行的jsfiddle http://jsfiddle.net/gNdPJ/2/.

有两种方法并且都使用Ember.计算排序:

 sortedTime: Ember.computed.sort('todayEvent',       function(a, b){

    if (
      moment(Ember.get(a, 'startTime') ) >  moment(Ember.get(b, 'startTime') ) 
    ){

   //returns morning timings before afternoon timings
   //api doc says return 1 when 'a' should come after 'b'
   //http://emberjs.com/api/#method_computed_sort

   return 1;

   } else if ( 
      moment(Ember.get(a, 'startTime') ) <   moment(Ember.get(b, 'startTime') ) 
   )
   {
    //returns afternoon timings before morning timings
   //api docs says return -1, when 'a' should come before 'b'
    return -1;
   }
     return 0;

  })

第二种方法

  //adapted from http://jsbin.com/OjoXOqE/9/edit

  sortedContent: Ember.computed.sort('[email protected] /cdn-cgi/l/email-protection', function(a, b){

    //the this keyword does not work here, 
    //throws "Object #<Object> has no method 'get'"
    //so we use the Ember keyword to get it working

   var ap = moment(Ember.get(a, 'startTime')),
       bp = moment(Ember.get(b, 'startTime'))

  //we return morning before afternoon times 
    if(ap !== bp) {
      return ap - bp;
    }

  })
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Emberjs 使用 sortProperties 按日期对内容进行排序 的相关文章

随机推荐

  • PHP 是否有“命名参数”,以便可以省略前面的参数并可以写入后面的参数? [复制]

    这个问题在这里已经有答案了 在 PHP 中 您可以调用不传入任何参数的函数 只要参数具有如下所示的默认值 function test t1 test1 t2 test2 t3 test3 echo t1 t2 t3 test 但是 假设我希
  • SOAP 方法参数中的数组通过 JAX-WS 生成?

    我正在使用 JAX WS 注释用 Java 构建 SOAP 服务 除此之外 我想知道如何在我的方法中注释数组参数 当我从带注释的接口生成 wsdl 然后再次从该 wsdl 生成 java 类时 我这样做是为了测试 在这两种情况下都使用 Ap
  • 使用 D3.min 查找非 0 的最小值

    我正在尝试使用 D3 来查找数据集中的最低值 但是 我也有 0 的值 但我希望 D3 找到非 0 的最小值 目前我正在使用 d3 min data function d return d houseValues 但显然 当找到 0 时 有时
  • 每次安装组件时,React hook useEffect 都会导致初始渲染

    我是 React hooks 的新手 所以 我想用 React hooks 实现 componentWillReceiveProps 我像这样使用 React useEffect React useEffect gt console log
  • 漂亮的打印 XML 文件

    原始问题 我正在尝试在没有任何外部库的情况下漂亮地打印 XML 文件 但无法让 Java 执行我想要的操作 这是到目前为止我的代码 我添加了类似问题的任何解决方案 TransformerFactory tfactory Transforme
  • 如何使用 SMTP 发送附件?

    我想编写一个使用Python发送电子邮件的程序smtplib http docs python org library smtplib html 我搜索了文档和 RFC 但找不到任何与附件相关的内容 因此 我确信我错过了一些更高层次的概念
  • 更改 iOS 7 中 UIToolbar 的高度

    我试图在新的 iOS 7 项目中更改 UIToolbar 的高度 但我无法做到 我正在使用 UINavigationController 来管理几个 UIViewController 我尝试通过导航控制器设置工具栏的框架 但遗憾的是 工具栏
  • 如何使用 Selenium Java 2.8 获取当前 DOM?

    我正在使用最新版本的 Selenium 和chromedriver测试 ZK 应用程序 在测试期间 我想转储 DOM 或其中的一部分 以帮助我找到所需的元素 并且可能帮助必须维护测试的人 方法WebDriver getPageSource
  • 查找适用于某个元素的所有 CSS 规则

    许多工具 API 提供了选择特定类或ID 的元素的方法 还可以检查浏览器加载的原始样式表 但是 为了让浏览器呈现元素 它们将编译所有 CSS 规则 可能来自不同的样式表文件 并将其应用到该元素 这就是您在 Firebug 或 WebKit
  • 使用 angular-ui-grid 预选加载行

    我想在页面加载时选择某些行 工作日 这是笨蛋plnkr co edit 48NyxngWNGIlOps1Arew p preview 有什么建议吗 将以下属性添加到您的 scope gridOptions目的 onRegisterApi f
  • 我什么时候应该将 Angular2 App 与 SystemJS 方法相反?

    我什么时候应该连接我的 Angular2 应用程序 什么时候应该保留 SystemJS 原始方法 将不同的模块保留在不同的文件中 主要取决于浏览器的支持 HTTP2 之前的旧方法是将所有内容捆绑到一个大文件中 现在我们已经有了 http2
  • 承诺履行处理程序未定义

    看起来非常基本 基于 Promise 的实现的实现没有返回我期望看到的值 数据 这就是我期望这个界面的工作方式 sdk request options gt Promise Response Object JSON 这是我的模型中的代码 r
  • 将 SDK 工具和 ADT 更新至 17,现在出现VerifyErrors

    我有一个引用两个图书馆项目的项目 升级ADT和SDK工具后版本17 http android developers blogspot com 2012 03 updated sdk tools and adt revision 17 htm
  • gnuplot:在交互模式下设置 link 和 x2tics

    在交互模式下 x2tics 在放大时很快就会消失 这个例子被展示了here https stackoverflow com a 60373156 11769765 set tics nomirror set x2tics set link
  • 双问号,它是如何工作的?

    我正在学习 Swift 作为这个过程的一部分 我试图弄清楚这里到底发生了什么 我有一个自定义 Segue 我想在其中放置模态视图控制器以消除转换 Objective c 中以前的内容是 UIViewController sourceView
  • 如何在iPad屏幕上触摸时获取PDF注释

    我开发了一个使用 CATiled Layer 在 ipad 上显示 PDF 的应用程序 到目前为止 一切都很好 但是有一个问题确实让我剪掉了最后的头发 我有一个带有嵌入注释的 PDF 每个注释都有一个 URL 我可以找到触摸区域的坐标 但问
  • 节点脚本永远不会结束

    我有下面的节点脚本来基本上复制一些文件的内容并将它们插入到 mongo 该脚本似乎永远不会结束 即使所有数据都已成功插入 我总是必须执行 Ctrl C 来终止它 我应该在 node js 中使用什么东西来结束脚本吗 var mongoose
  • Jenkins CI 与 Chef 服务器

    有什么方法可以将 Jenkins 与 Chef Server 集成 以便我可以创建要执行的作业吗 我不想去厨师工作站 我需要在单独的服务器或厨师工作站上安装 jenkins 吗 我可以直接从 Jenkins 控制台执行所有食谱吗 是的 你可
  • 是否有针对开发团队的 Web 服务 (API) 标准或最佳实践?

    如果您要开始为您的 Web 应用程序开发 API 是否有任何类型的指南 最佳实践或标准来构建 Web 服务 我已经看到了有关该主题的一些讨论 我想获得更多信息 至少得到关于从哪里获取信息的指示 提前致谢 关于 网络服务 存在着广泛的多样性和
  • Emberjs 使用 sortProperties 按日期对内容进行排序

    我正在尝试使用 Emberjs排序属性按日期对内容进行排序jsfiddle http jsfiddle net CmtpX 2 我的模型有一个开始时间我尝试排序的属性 但没有成功 然后我创建了一个名为的计算属性今日活动在返回与传入日期匹配的