requirejs实现单页面跳转、动态渲染页面文本内容 require.js+bootstrap实现简单的页面登录和页面跳转

小颖之前其实有分享一篇文章: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
    };
});

git地址:https://gitee.com/lucy1028/requireDemo

猜你喜欢

转载自www.cnblogs.com/yingzi1028/p/9779287.html
今日推荐