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

发布于 2022-09-03 11:56:30 字数 2798 浏览 19 评论 0

一个主页面,通过不同的链接切换不同的组件,每显示一个组件的时候,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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

月亮邮递员 2022-09-10 11:56:30

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

羁客 2022-09-10 11:56:30

主页面:
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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文