javascript - 使用 framework7 选择单选按钮后重定向到另一个页面

Question

我无法在选择单选按钮后根据用户选择重定向到页面 X 到页面 Y。控制台给我写信:

Uncaught ReferenceError:  onClickGo is not defined

我在 my-app.json 中声明了页面

routes: [
{
    name: 'home',
    path: '/home/',
    url: './pages/home/home.html'
},
{
    name: 'travel',
    path: '/travel/',
    url: './pages/travel/travel.html',
    routes: [

        {
            name: 'travel-ny',
            path: ' ny/',
            url: './pages/travel/ny.html',
        },
        {
            name: 'travel-la',
            path: ' la/',
            url: './pages/travel/la.html',
        },

        {
            name: 'travel-milan',
            path: ' milan/',
            url: './pages/travel/milan.html',
        },

    ]
}

用户的选择在travel.html中进行

<div data-name="travel" class="page">

<div class="page-content pg-no-padding">

<div class="row">
    <div class="col-100 tablet-100 desktop-100">            
    <form class="list" id="travel-form">
            <ul>
                <li>
                    <label class="item-radio item-content">
                        <input type="radio" name="travel" value="ny" checked="checked"/>
                        <i class="icon icon-radio"></i>
                        <div class="item-inner">
                            <div class="item-title">New York</div>
                        </div>
                    </label>                            
                </li>

                <li>
                    <label class="item-radio item-content">
                        <input type="radio" name="travel" value="la"/>
                        <i class="icon icon-radio"></i>
                        <div class="item-inner">
                            <div class="item-title">Los Angeles</div>
                        </div>
                    </label>                            
                </li>

                <li>
                    <label class="item-radio item-content">
                        <input type="radio" name="travel" value="milan" />
                        <i class="icon icon-radio"></i>
                        <div class="item-inner">
                            <div class="item-title">Milan</div>
                        </div>
                    </label>                            
                </li>

        </form> <!--list--> 

        <div class="block">
            <a class="button button-fill travelChoice" onclick="onClickGo()">Go</a>
        </div>      
    </div><!--col-100-->
</div><!--row-->            

我将 onClickGo 函数放在 travel.js 中，我以这种方式将其包含在 home.html 中

<script type="text/javascript" src="js/travel.js"></script>

travel.js

const onClickGo = () => {
   $$('.travelChoice').on('click', function(){

    //retrieve the value selected
    var selectedValue = $$('.list input:checked').val();
   //go to the page 
   router.navigate('/travel/'+ selectedValue +'/');

}

提前致谢

Answer 1

我认为你需要尝试这个，因为在找到你的函数之前加载 html:

 $$('.travelChoice').on('click', function(){

    //retrieve the value selected
    var selectedValue = $$('.list input:checked').val();
   //go to the page 
   router.navigate('/travel/'+ selectedValue +'/');
}

没有用 onClickGo 变量包装它，也没有从按钮上删除点击事件

<a class="button button-fill travelChoice">Go</a>

...我认为它会起作用......也尝试使用它来导航:

self.app.router.navigate('/travel/'+ selectedValue, {reloadCurrent: true}); 

通过添加 reloadCurrent，您可以从已兑现的 html 页面打开页面而无需公平