2

我正在清理一个包含 65 个以上 html 页面和一个中央 javascript 库的多页面应用程序。我的 html 页面有大量冗余，而中央 js 库已成为意大利面条。我面临合并页面的限制，因为我在一个更大的框架内工作，该框架强制执行某种结构。我想减少冗余并清理代码。

我发现了主干、MVC 模式、微模板和 requirejs，但它们似乎最适合单页应用程序。不知何故，我需要让主模块知道正在加载哪个页面，以便它将正确的元素放在页面上。我正在考虑传入 html 的标题，这将获取正确的页面元素集合并将它们作为对象传递给 App.initialize。

1）任何人都可以验证这种方法吗？如果没有，是否有推荐的替代方法？像木偶这样的骨干扩展怎么样？

2）任何人都可以推荐一种将页面细节放入主干框架的方法吗？

按照主干教程，我使用调用 view.render 方法的 App.initialize 方法的 main.js 构建了一个成功的测试页面。我的第一个想法是阅读 html 页面标题并使用它为正在加载的特定页面选择模型。我必须传入一个包含每个页面布局细节的对象。这是视图的渲染方法，因此您可以看到我要执行的操作：

            render: function () {  // pass parameter to render function here?
            var data = new InputModel,
                pageTitle = data.pageTitle || data.defaults.pageTitle,
                compiled,
                template;

            var pageElements = [
                { container: '#page_title_container', template: '#input_title_template' },
                { container: '#behavior_controls_container', template: '#behavior_controls_template' },
                { container: '#occurred_date_time_container', template: '#date_time_template' }]

            for (var i = 0; i < pageElements.length; i++) {
                this.el = pageElements[i].container;
                compiled = _.template($(InputPageTemplates).filter(pageElements[i].template).html());
                template = compiled({ pageTitle: pageTitle });  
                //pass in object with values for the template and plug in here?
                $(this.el).html(template);
            }
        }

对你的帮助表示感谢。我在更新大约 1999 年的 JavaScript 技能时获得了很多乐趣。语言发生了很多很酷的事情。

4

1 回答 1

1

使用文档标题来选择加载的脚本听起来有点杂乱无章。但是，如果它有效，那就去吧。

另一个值得探索的想法可能是使用Backbone.Router来pushState:true设置正确的页面。当您Backbone.history.start()在启动时调用时，路由器会点击与您当前 url 匹配的路由，即您所在的页面。

在路由回调中，您可以执行所有特定于页面的初始化。

您可以将模板和容器选择从视图移到路由器中，并在initialize()函数中设置视图（视图的构造函数）。说，类似：

//view
var PageView = Backbone.View.extend({
    initialize: function(options) {
        this.model = options.model;
        this.el = options.el;
        this.title = options.title;
        this.template = _.template($(options.containerSelector));
    },

    render: function() { 
        window.document.title = title;
        var html = this.template(this.model.toJSON());
        this.$el.html(html);
    }
});

在路由器级别处理视图选择：

//router
var PageRouter = Backbone.Router.extend({
    routes: {
        "some/url/:id": "somePage",
        "other/url":    "otherPage"
    },

    _createView: function(model, title, container, template) { 
        var view = new PageView({
            model:model,
            title:title
            el:container,
            templateSelector:template,
        });
        view.render();
    },

    somePage: function(id) { 

        var model = new SomeModel({id:id});
        this._createView(model, "Some page", "#somecontainer", "#sometemplate");
    },

    otherPage: function() {
        var model = new OtherModel();
        this._createView(model, "Other page", "#othercontainer", "#othertemplate");
    }
});

并使用启动应用程序Backbone.history.start()

//start app
$(function() {
    var router = new PageRouter();
    Backbone.history.start({pushState:true});
}

在这种解决方案中，视图代码不需要知道其他视图的具体代码，如果您需要为某些页面创建更专业的视图类，您不需要修改原始代码。

乍一看，这似乎是一个干净的解决方案。当路由器想要开始捕获路由并且您希望浏览器正常导航离开页面时，当然可能会出现一些问题。如果这会导致严重的问题，或者导致比基于标题的解决方案更大的混乱，那么原始解决方案可能仍然是可取的。

（未经测试的代码示例）

于 2012-12-10T21:06:19.817 回答