requirejs实现单页面跳转、动态渲染页面文本内容

最新推荐文章于 2024-05-15 19:44:29 发布

weixin_30872499

最新推荐文章于 2024-05-15 19:44:29 发布

阅读量351

点赞数

CC 4.0 BY-SA版权

文章标签： git

原文链接：http://www.cnblogs.com/yingzi1028/p/9779287.html

本文介绍使用RequireJS和Bootstrap实现简单页面登录与跳转的方法。通过定义BaseController，设置模板和模型，完成视图渲染。文章包含具体代码示例及git仓库链接。

小颖之前其实有分享一篇文章：require.js+bootstrap实现简单的页面登录和页面跳转

配置什么的其实都是一样的，没多大修改，还是惯例先来看看页面效果：

修改文件：

BaseController

define(function () {
    var setTemplate = function (template) {
        this.template = template;
    };
    var setModel = function (model) {
        this.model = model;
    };
    var render = function (container) {
        // 获取模板
        var templateStr = this.template;
        var resourceObj = this.model;
        var regS = null;
        // 替换模板
        for (var key in resourceObj) {
            regS = new RegExp("\\{" + key + "\\}", "g");
            templateStr = templateStr.replace(regS, resourceObj[key]);
        }
        // 加载页面
        container.innerHTML = templateStr;
    };
    return {
        setTemplate: setTemplate,
        setModel: setModel,
        render: render
    }
});

home.js

define(function (require) {
    var Base = require('app/Base'),
        controller = require('../BaseController'),
        template = require('text!./home.html'),
        model = {
            key1: 'iScroll页面-----可点',
            key2: '测试1',
            key3: '测试2'
        };
    /**
     * 对外暴露函数，用于视图加载
     */
    var load = function () {
        render();
        bind();
        run();
    };

    // setModel
    /**
     * 视图渲染
     */
    function render() {
        controller.setTemplate(template);
        controller.setModel(model);
        controller.render(Base.getViewContainer());
    }

    /**
     * 事件绑定
     */
    function bind() {
        $('#goIScroll').click(function () {
            location.hash = "iScrollPage";
            document.title = 'iScroll页面';
        });
    }

    /**
     * 除事件绑定
     */

    function run() {
    }

    return {
        load: load
    };
});