Backbone.js连接视图(require.js)

Backbone.js connecting views (require.js)

本文关键字：js require 视图 连接 Backbone      更新时间：2023-09-26

我是backbone.js和require.js的新手。我决定使用这个样板。我想连接两个视图，就像一个链接点击在经典的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;
    }
);

所以我的问题是如何把代码定义视图NextView到文件视图。js?谢谢你的帮助。

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

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

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 );

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

相关文章：