【问题标题】:Multiple table rows as a backbone.js view?多个表行作为backbone.js 视图?
【发布时间】:2011-08-15 20:27:44
【问题描述】:

所以我有一个数据网格,网格中的每个项目都有一个关联的模型和视图。我需要将每个项目呈现为 两个 表行以实现所需的 UI。 (不,这不是我的设计……)

第一次尝试:在视图的render() 方法中,只渲染两行并将它们添加到this.el。然后我将每个视图附加到表中,并发现每一对行都包含在<div> 中。无效的 HTML 和布局都是错误的。

好的,第二次尝试:再次在视图中渲染两行,但我没有将整个视图附加到表中,而是使用tableItemView.$("tr") 附加子行。万岁,它有效!但是等一下……行事件现在已经停止触发。我发现这是因为主干使用jQuery.delegate,所以所有事件都被委托给原来的el,它不再是表格的一部分。

我喜欢主干的简洁架构,但很难找到一个好的解决方案。有什么想法吗?

【问题讨论】:

  • 你能发布一些你的代码吗?
  • 我现在无法访问它,但如果有帮助可以明天发布。

标签: javascript backbone.js


【解决方案1】:

设置

tagName: 'tbody' 

应该允许您在不破坏表格的情况下将相关的 tr 标签组合在一起,并且仍然允许 this.el 工作。

【讨论】:

【解决方案2】:

在您的视图对象中,您的 tagName 属性设置为什么?

来自文档:

this.el is created from the view's tagName, className, and id properties, 
if specified. If not, el is an empty div

你可能想设置

tagName: 'tr'

然后在render()中:

$(this.el).html("<td>content for row one</td>").append("<tr><td>content for row two</td></tr>");

这可能不完全有效,但你明白了。

【讨论】:

  • append() 不会在第一行中添加第二行吗?这是你的建议吗?
【解决方案3】:

一种选择是简单地创建 2 个小视图,每个视图都引用相同的模型,每行一个。

根据需要如何集成 2 行(可能作为一个单元移动/排序),您可以拥有一个类似“控制器”的视图来创建子视图并协调它们的行为。

【讨论】:

    猜你喜欢
    • 2012-02-07
    • 1970-01-01
    • 2013-05-23
    • 2012-06-30
    • 2017-07-20
    • 1970-01-01
    • 1970-01-01
    • 2023-03-30
    • 2011-11-15
    相关资源
    最近更新 更多