phpstudy集成环境

 首页 > 【求助】avalon2 调用组件在ms-html显示，能不能重复使用onReady？

【求助】avalon2 调用组件在ms-html显示，能不能重复使用onReady？

一个主页面，通过不同的链接切换不同的组件，每显示一个组件的时候，onReady和onDispose都会处理一些业务。
问题：当我重新打开某个组件的时候，onReady只有在初始化的时候调用了一次，再次就不执行了，而页面的一些业务因为在第一次onDispose时处理掉，再次回去的时候，要把处理掉的业务再重新恢复相关业务。因为onReady只执行一次，再回去时，就执行不了了。
注：多个页面回去此组件，所以不能在其他页面的onDispose处理，只能在该组件里处理。
求大神们解答！谢谢！

主页面：
js:

require('./dscan');
require('./dserver');

var vm = avalon.define({
    $id : 'demos',
    isView: !1,
    title: '显示初始化标题',
    view: '',
    href: function (component, tit) {
        var url = '#!/' + component + '&&' + tit;
        window.location.href = url;
    }
})

window.addEventListener('hashchange', function (e) {
    var hash = e.newURL.split('#!/')[1].split("&&")[0];
    vm.view = '<' + hash + ' cached="true" ms-widget="{$id:\'' + hash + '\'}"></' + hash + '>';
})

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Title</title>
</head>
<body ms-controller="demos">
    <h1 class="view-title">
        {{@title}}
    </h1>
    <ul>
        <li ms-click="@href('ms-scan','扫一扫')">
            扫一扫
        </li>
        <li ms-click="@href('ms-server','服务')">
            服务
        </li>
    </ul>

    <div ms-html="@view"></div>
</body>
</html>

组件：
<ms-scan>
js:

var temp = require('../_views/dscan.html');
var isView = document.querySelector('.view-title');
avalon.component('ms-scan', {
    template: temp,
    defaults: {
        dred: 'red',
        dtitle: "初始化标题已被隐藏",
        dcon: "",
        onReady: function () {
            // 隐藏“初始化标题”
            avalon(isView).css('display','none')
        },
        onDispose: function () {
            // 显示“初始化标题"
            this.dcon = '初始化标题再不会被隐藏'
            avalon(isView).css('display','')
        }
    }
});

html:

<div class="ms-scan">
    <h1>
        {{@dtitle}}
    </h1>
    <h3>
        我是扫一扫
    </h3>
    <div ms-css="{color: @dred}">
        {{@dcon}}
    </div>
</div>

<ms-server>
js:

var temp = require('../_views/dserver.html');
avalon.component('ms-server', {
    template: temp,
    defaults: {
        stitle: "初始化标题又显示了",
        onReady: function () {
        },
        onDispose: function () {
        }
    }
});

html:

<div class="ms-server">
    <h1>
        {{@stitle}}
    </h1>
    <h3>
        我是服务
    </h3>
</div>

主页面：
js:

require('./dscan');
require('./dserver');

var vm = avalon.define({
    $id : 'demos',
    isView: !1,
    title: '显示初始化标题',
    view: '',
    href: function (component, tit) {
        var url = '#!/' + component + '&&' + tit;
        window.location.href = url;
    }
})

window.addEventListener('hashchange', function (e) {
    var hash = e.newURL.split('#!/')[1].split("&&")[0];
    vm.view = '<' + hash + ' cached="true" ms-widget="{$id:\'' + hash + '\'}"></' + hash + '>';
})

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Title</title>
</head>
<body ms-controller="demos">
    <h1 class="view-title">
        {{@title}}
    </h1>
    <ul>
        <li ms-click="@href('ms-scan','扫一扫')">
            扫一扫
        </li>
        <li ms-click="@href('ms-server','服务')">
            服务
        </li>
    </ul>

    <div ms-html="@view"></div>
</body>
</html>

组件：
<ms-scan>
js:

var temp = require('../_views/dscan.html');
var isView = document.querySelector('.view-title');
avalon.component('ms-scan', {
    template: temp,
    defaults: {
        dred: 'red',
        dtitle: "初始化标题已被隐藏",
        dcon: "",
        onReady: function () {
            // 隐藏“初始化标题”
            avalon(isView).css('display','none')
        },
        onDispose: function () {
            // 显示“初始化标题"
            this.dcon = '初始化标题再不会被隐藏'
            avalon(isView).css('display','')
        }
    }
});

html:

<div class="ms-scan">
    <h1>
        {{@dtitle}}
    </h1>
    <h3>
        我是扫一扫
    </h3>
    <div ms-css="{color: @dred}">
        {{@dcon}}
    </div>
</div>

<ms-server>
js:

var temp = require('../_views/dserver.html');
avalon.component('ms-server', {
    template: temp,
    defaults: {
        stitle: "初始化标题又显示了",
        onReady: function () {
        },
        onDispose: function () {
        }
    }
});

html:

<div class="ms-server">
    <h1>
        {{@stitle}}
    </h1>
    <h3>
        我是服务
    </h3>
</div>

给我一个完整的页面啊，这样人家才能跑起来试验

【热门文章】
【热门文章】