Backbone JS 数据表集成

发布于 2024-12-23 09:12:28 字数 431 浏览 0 评论 0原文

我正在构建一个主要基于 Backbone JS 的应用程序,到目前为止给我留下了深刻的印象。然而,该应用程序的一部分需要一个相当灵活的表格/网格布局,以允许一些客户端过滤/搜索/基于列的过滤等...

我过去使用过数据表,看起来像这将是一个非常合适的选择,但我在将主干模型/集合集成到数据表初始化时遇到了一些问题。

DT 论坛上的一位成员建议利用 mDataProp 属性 (DataTable 论坛),但到目前为止我还没有成功。

我希望有人能够为我指明正确的方向,以便我可以使用数据表来查看我的收藏和项目,并且仍然可以访问 Backbone 提供的所有出色的事件绑定等。

谢谢!

I'm building an application that is based primarily on Backbone JS and have been really impressed so far. There is a portion of the app, however, that demands a fairly flexible table/grid layout that would allow some client-side filtering/searching/column-based filtering etc...

I've used Datatables in the past and it seems like it would be a great fit, but I am having some issues integrating the Backbone Models/Collections into the Datatable init.

One of the members on the DT forums suggests taking advantage of the mDataProp attribute (DataTable Forums), but I have been unsuccessful so far.

I was hoping somebody might be able to point me in the right direction so that I can use Datatables to view my collections and items, and still have access to all the great event-binding etc that Backbone offers.

Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

只涨不跌 2024-12-30 09:12:28

我对 dataTable 不太了解,但看起来您可以使用 Backbone Collection 上的 toJSON 函数来获取 aaData 值。

这是一个例子

$('table').dataTable({
  "aaData": yourCollection.toJSON(),

  "aoColumns": [
    { "sTitle": "Engine",   "mDataProp": "engine" },
    { "sTitle": "Browser",  "mDataProp": "browser" },
    { "sTitle": "Platform", "mDataProp": "platform" },
    { "sTitle": "Version",  "mDataProp": "version" },
    { "sTitle": "Grade",    "mDataProp": "grade" }
  ]
});

I don't know much about dataTable but it looks like you can use the toJSON function on the Backbone Collection for your aaData value.

Here's an example

$('table').dataTable({
  "aaData": yourCollection.toJSON(),

  "aoColumns": [
    { "sTitle": "Engine",   "mDataProp": "engine" },
    { "sTitle": "Browser",  "mDataProp": "browser" },
    { "sTitle": "Platform", "mDataProp": "platform" },
    { "sTitle": "Version",  "mDataProp": "version" },
    { "sTitle": "Grade",    "mDataProp": "grade" }
  ]
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文