Question

我是backbone.js和require.js的新手。我决定使用这个boilerplate。我想连接两个视图，比如经典html页面中的链接点击。所以第一个视图的代码是：

    // View.js
define(["jquery", "backbone", "models/Model", "text!templates/heading.html"],
    function($, Backbone, Model, template){
        var View = Backbone.View.extend({
            // The DOM Element associated with this view
            el: ".example",
            // View constructor
            initialize: function() {
                // Calls the view's render method
                this.render();
            },
            // View Event Handlers
            events: {

            },
            // Renders the view's template to the UI
            render: function() {
                // Setting the view's template property using the Underscore template method
                this.template = _.template(template, {});
                // Dynamically updates the UI with the view's template
                this.$el.html(this.template);
                // Maintains chainability
                return this;
            }
        });
        // Returns the View class
        return View;
    }
);

HTML模板：

<!-- HTML Template -->
<h3>My first backbone app</h3>
<a href="#next">NEXT PAGE</a>

最后是路由器：

define(["jquery", "backbone", "models/Model", "views/View", "collections/Collection"],
    function($, Backbone, Model, View, Collection) {
        var DesktopRouter = Backbone.Router.extend({
            initialize: function() {
                // Tells Backbone to start watching for hashchange events
                Backbone.history.start();
            },
            // All of your Backbone Routes (add more)
            routes: {
                // When there is no hash on the url, the home method is called
                "": "index",
                "next": "next"
            },
            index: function() {
                // Instantiates a new view which will render the header text to the page
                new View();
            },
            next: function() {
                // Instantiates next view
                new NextView();
            }
        });
        // Returns the DesktopRouter class
        return DesktopRouter;
    }
);

所以我的问题是如何将定义ViewView的代码放入文件View.js？谢谢你的帮助。

Answer 1

最简单的方法是定义一个事件聚合器，非常简单。

首先为事件聚合器创建以下对象：

define( function ( require ) {
    'user strict';

    var _ = require( 'underscore' ),
        Backbone = require( 'backbone' );

    return _.extend({}, Backbone.Events);
});

订阅并发布事件如下：

Events.trigger( 'video:closeModal' );
Events.on( 'video:closeModal', this.stopVideo );

我只是从我们的代码库中抓取了这个，所以如果您需要更多说明，请告诉我。

Backbone.js连接视图（require.js）

1 个答案: