2012-07-10 64 views
1

我想了解在骨干中使用模型和视图的正确方法。首先应该使用什么,如果可能,为什么?骨干 - 正确使用模型和查看

例如:如果我有一个显示一系列在页面上不同的图像的应用,一旦其点击它的动作,显示与名称,描述,颜色等,只是图像页面

会是一个什么更好的使用方法;

  1. 单击图像,这将更改触发路由器的URL,从而显示正确的视图。从该视图加载模型。

  2. 有一个click事件附加到每个图像,这改变了模型,然后触发一个事件改变视图的细节。

  3. 再次使用路由器,调用模型,然后触发视图。但是,我仍然可以使用该模型获取详细信息。

  4. 称他们无论是在路由器并通过模型通过对看法?这又是如何完成的?

  5. 一种不同的方法

我使用的骨干样板,我认为这可能是混淆了我一下。但任何文章或解释都会非常有帮助。

回答

2

我通常设置东西的方式是,我做的Backbone.Events重利用;我倾向于通过将这些事件绑定到视图中的方法来拦截视图中的点击事件。反过来,这界事件会做一些看法,具体的工作,然后会做一些像this.trigger("Router_SomeEvent") - 指定该事件是,通常情况下,在视图中创建路由器,像这样绑定:

// Begin router snippet... 
someRouteMethod: function() { 
    this.views.SomeViewInstance = new MyViews.SomeViewClass(); 
    this.views.SomeViewInstance.bind("Router_SomeEvent", this.onSomeEvent); 
}, 

onSomeEvent: function() { 
    this.navigate("NewLocation", { trigger: true }); 
} 
// End router snippet 

使用这种发布/订阅(pub /分)模式,你的代码变得更加解耦,更容易处理和扩展。起初有点令人困惑,但一旦掌握了它,它就变得越来越清晰,为什么它很有用。我倾向于让我的路由器处理所有......呃...路由,而我的视图只包含渲染逻辑,事件绑定到UI,并在必要时冒泡事件到路由器。您还可以将事件绑定到您的模型;我倾向于使用类似于视图的模型,他们会通知我的路由器有一些变化,路由器将继续处理该事件,通过更改视图状态,更改其他模型或集合等。

主干非常强大,但需要相当长的时间来学习。我推荐Addy Osmani的Backbone Fundamentals;他还有一本关于O'Reilly的书,这本书很棒。

+0

该死的,这是过度工程这样一个简单的任务)) – 2012-07-10 17:47:34

+0

我假设,如果你使用骨干开始,你试图做一些适度复杂:) – 2012-07-10 17:49:25

+2

@mvblfst:我会说这取决于你期望应用程序的复杂程度。如果你只是简单地开发一个应用程序,那么你不需要所有这些东西,但今天的快速入侵是明天的企业级任务关键型应用程序,所以它从一开始就不会伤害到所有的东西。 – 2012-07-10 17:54:40

0

单击图像,这将更改触发 路由器的URL,从而显示正确的视图。从该视图加载 模型。

你不一定需要一台路由器。例如,如果您打算将此URL用作永久链接,并且只有用户转到此链接才能打开图像详细信息视图,则只需要使用它。

有一个click事件附加到每个图像,这改变了模型,然后触发一个事件改变视图的细节 。

为什么要点击更改模型?从我所了解的情况来看,您有3种观点:容纳图像大拇指的容器,拇指图像视图和图像细节视图(例如在Lightbox中打开更大的图像)。现在,当您构建容器时,您将图像作为参数传递给collection。容器呈现集合中每个项目的缩略图视图。请记住,现在每个拇指视图都有图像模型。现在点击调用图像细节视图并传递你已经拥有的模型作为参数。目前没有模型改变,路由或事件真的涉及到。