【问题标题】:Backbone - Using Models and View CorrectlyBackbone - 正确使用模型和视图
【发布时间】:2012-07-10 04:21:47
【问题描述】:

我想弄清楚在主干中使用模型和视图的正确方法。如果可能,应该首先使用什么以及为什么。

例如:如果我有一个在页面上显示一系列不同图像的应用程序,一旦点击它,它就会移动页面,该页面仅显示带有名称、描述、颜色等的图像。

什么是更好的使用方法;

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

  2. 将点击事件附加到每个图像,这会更改模型中的详细信息,然后触发事件以更改视图。

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

  4. 在路由器中调用它们并将模型传递给视图?又是怎么做到的?

  5. 另一种方法

我正在使用主干样板,我认为这可能会让我有点困惑。但是任何文章或解释都会非常有帮助。

【问题讨论】:

    标签: backbone.js


    【解决方案1】:

    我通常的设置方式是大量使用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
    

    使用这种 publish/subscribe (pub/sub) 模式,您的代码变得更加解耦,并且更易于处理和扩展。一开始有点混乱,但是一旦你掌握了它,就会越来越清楚它为什么有用。我倾向于让我的路由器处理所有......好吧......路由,而我的视图只包含渲染逻辑、事件绑定到 UI 以及必要时将事件冒泡到路由器。您还可以将事件绑定到您的模型;我倾向于使用与视图类似的模型,因为它们会通知我的路由器一些更改,并且路由器将继续通过更改视图状态、更改其他模型或集合等来处理该事件。

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

    【讨论】:

    • 该死,对于这么简单的任务来说,这是过度设计))
    • 我假设如果您一开始就使用 Backbone,那么您正在尝试做一些比较复杂的事情 :)
    • @mvblfst:我想说这取决于您期望应用程序有多复杂。如果您只是创建一个简单的应用程序,那么您不需要所有这些东西,但今天的快速破解是明天的企业级关键任务应用程序,因此从一开始就将所有内容解耦并没有什么坏处。
    • @muistooshort 这实际上是一个很好的观点。目前,我和团队正在开发企业级组件,该组件显示图像为 Pinterest 砖石墙,并且需要具有图像详细视图和情绪板视图的永久链接。这需要一个路由器才能使永久链接工作,但我没有想过将所有导航委托给路由器。
    【解决方案2】:

    单击图像并更改触发 路由器,它显示正确的视图。从那个视图加载 型号。

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

    为每张图片附加一个点击事件,这会改变细节 在模型中,然后触发一个事件来改变视图。

    为什么要在点击时更改模型?据我了解,您有 3 个视图:包含图像缩略图的容器、缩略图图像视图和图像详细信息视图(例如,在灯箱中打开更大的图像)。现在,当您构建容器时,您将带有图像的集合作为参数传递。 Container 为集合中的每个项目呈现缩略图视图。请记住,现在每个拇指视图都有图像模型。现在单击调用图像详细信息视图并传递您已经作为参数的模型。此时实际上不涉及模型更改、路由或事件。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-01-30
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多