webpack - avalon 无法刷新页面。

查看:156
本文介绍了webpack - avalon 无法刷新页面。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

使用webpack打包 avalon2.1.16版本。

webpack.config.js文件

var webpack = require("webpack");

var path = require("path");

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    entry: {
        index: './index'
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].js"
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: 'style-loader!css-loader'},
            {test: /\.html$/, loader: 'raw!html-minify'},
            {test: /\.(jpe?g|png|gif|svg)/, loader: 'url?limit=8192'}
        ]
    },
    plugins: [commonsPlugin],
    resolve: {
        extensions: ['.js', "", ".css"],
        alias: {
            avalon: path.join(__dirname, 'node_modules/avalon2/dist/avalon.js'),
            '../avalon': path.join(__dirname, 'node_modules/avalon2/dist/avalon.js'),
            mmRouter: path.join(__dirname, 'node_modules/mmRouter/dist/mmRouter.js')
        }
    }
}

index.js文件

    var avalon = require("avalon");

    require("mmRouter");

    var vm = avalon.define({
        $id: 'test',
        userName: "管理员",
        currentTime: new Date,
        main:''
    })

    var t = null;

    function show() {
        clearTimeout(t);

        vm.currentTime = new Date;
        avalon.scan(document.body);
        t = setTimeout(show,1000);
    }

    t = setTimeout(show,1000);

index.html文件

<body :controller="test">
    <div class="header-time"><label :text="@currentTime | date('yyyy-mm-dd HH:MM:ss')"></label></div>
    <div class="login-user">欢迎您,<strong :text="@userName"></strong> <a>注销</a></div>
</body>

后台更新 currentTime。前台页面不刷新。

解决方案

看这个 传送门

var vm = avalon.define({
    $id: 'test',
    userName: "管理员",
    currentTime: +(new Date)
})
avalon.scan(document.body);
var t = null;
function show() {
    clearTimeout(t);
    vm.currentTime = +(new Date);    
    t = setTimeout(show,1000);
}
t = setTimeout(show,1000);

最后给你预览地址 https://jsfiddle.net/chexian/...

这篇关于webpack - avalon 无法刷新页面。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆