关于Backbone.js:Backbone -正确使用模型和视图

 2021-04-08 

Backbone - Using Models and View Correctly

我想对在Backbone 网中使用模型和视图的正确方法有所了解。首先应使用什么,如果可能,为什么要使用。

例如:如果我有一个应用程序在页面上显示一系列不同的图像,则单击该应用程序后,它将移动仅显示具有名称,描述,颜色等图像的页面。

使用哪种更好的方法;

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

  • 在每个图像上附加一个click事件,这会更改模型中的详细信息,然后触发一个事件来更改视图。

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

  • 在路由器中调用它们并将模型传递给视图吗?再次如何完成?

  • 另一种方法

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


    我通常的设置方式是大量利用Backbone.Events;我倾向于通过将这些事件绑定到视图中的方法来拦截视图中的click事件。反过来,该绑定事件将执行某些特定于视图的工作,然后将执行类似this.trigger("Router_SomeEvent")的操作-指定该事件的绑定,通常是在路由器中创建视图的地方,例如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 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 / sub)模式,您的代码变得更加解耦,更易于处理和扩展。起初有点让人困惑,但是一旦掌握了它,它就会变得越来越清楚为什么有用。我倾向于让路由器处理所有的……路由……,而我的视图仅包含呈现逻辑,将事件绑定到UI以及在必要时将事件冒泡到路由器的逻辑。您还可以将事件绑定到模型。我倾向于使用类似于视图的模型,因为它们会通知我的路由器某些更改,并且路由器将继续通过更改视图状态,更改其他模型或集合等来处理该事件。

    Backbone 网非常强大,但是需要花费很多时间来学习。我推荐Addy Osmani的Backbone 基础知识;他还有一本关于O'Reilly的书,读得非常好。


    Clicking the image and this changing the URL which triggers the
    router, which displays the correct view. The from that view load the
    model.

    您不一定需要路由器。仅当您打算将此URL用作永久链接并在用户转到该链接后打开图像详细信息视图时,才想使用它。

    Having a click event attach to each image, which changes the details
    in the model, which then triggers an event to change the view.

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