带有标签图案的Ember.js页面
我想要在issue/:id/edit路线上显示一个复杂的表格.我可以显示所需内容的唯一方法是使用多个标签.请参阅附带的草图以使情况更清晰:
那么使用Ember框架实现这一目标的"规范"方法是什么？
我的第一次尝试是这样的:
模式1:部分
因此,所有数据都被加载并绑定到单个tickets/:id/edit路由和控制器.我使用partials来加载不同的标签.
这起初工作正常.然而随着应用程序的增长,单个控制器变得太小而无法处理所有事情.有几十个属性,没有明确的指示什么是常见的,什么属于单个页面.因此,我决定我需要一些方法将各个标签的逻辑分解为他们自己的"事物".
模式2:路线
每个选项卡都有自己的路由和控制器.所有数据都加载到基本/tickets/:id/edit路径中,所有子路径都从那里"借用"他们需要的东西.
setupController: function (controller, models) {
var ticket = this.modelFor("ticketEdit").ticket;
controller.set("model", ticket );
}
其中一条子路线的示例
我已经实现了这一点,我已经在努力解决问题了.我需要阻止人们访问裸/edit路线.我需要阻止页面导航结束浏览器历史记录.我需要调整我的面包屑和其他小部件.
我可以自己解决所有这些问题(这不是问题的重点),但我不确定这是值得的.最重要的是,路线模式并不适合我需要的东西.所以在我把更多的时间扔到河边之前,我想我最好停下来想想是否有更好的模式.
想到两个候选人.
模式3:观点
所以我可以为每个选项卡创建一个单独的视图.他们都会分享TicketEditController,但我可以用一些自定义的东西打包它们,这样我就可以减轻公共控制器的负担.
缺点:它使水变得混乱.我需要显示的一些小部件是视图本身,可能希望从控制器实例化.当我开始在视图中的视图中添加视图时,不确定这将如何缩放.
不过,到目前为止,这似乎是最合适的.但我错过了什么吗？是否值得放弃路线模式？
模式4:组件
与视图类似.技术上可行,但需要对许多小部件进行重大重构,这些小部件假设他们可以直接访问共享控制器.但这种方法有很大的好处吗？不确定.
模式5:???
???
所以这就是你进来的地方.
- 您如何看待这些方法？
- 你用哪一个？
- 对于这些/每一个,我都缺少哪些问题或好处？
- 你能弄清楚'模式5',还是这些问题都是可行的方法？
既然你正在寻求反馈，我至少想在这里表达我的想法。
从已确定的模式来看，我倾向于前两种。我认为区别在于选项卡的可收藏性/导航。我希望能够发送某人通过 URL 编辑特定选项卡（所以我喜欢#2），但听起来您的要求是保持传统的选项卡式行为（其中选项卡不是页面并点击背面）按钮不会带您到上一个选项卡）。所以，是的，您可以管理浏览器历史记录，但听起来您还需要解决其他部分（面包屑/小部件），因此您需要权衡那里的成本。
半生不熟的 mixin 想法
部分模式的主要缺点是单片控制器。我想知道您是否会更好地创建控制器混合，明确每个选项卡的属性。也许每个选项卡都是一个 mixin：
App.TicketEditController = Ember.ObjectController.extend(
App.TicketEditGeneralTabMixin,
App.TicketEditTextTabMixin,
... {
//common properties
});
杂项
您可以考虑将http://discuss.emberjs.com/作为获取相关反馈的另一个地方。
代码审查可能是另一个获得想法的地方。