如何在Aurelia的同一区域点击按钮上的页面上的内容区域？

我需要添加什么，以便当用户点击Current Period按钮时，整个区域（为清晰起见，在第二个图像中用阴影表示）被替换为由periods.js和periods.html控制的页面内容？我已经尝试click.delegate（显示在下面的第二个代码块中），并做了其他徒劳的尝试。任何提示将不胜感激。随时告诉我是否需要显示更多的代码。谢谢！如何在Aurelia的同一区域点击按钮上的页面上的内容区域？

这是第一个图像： How the page looks

这里是第二图像： Area shaded

System.register([], function (_export) { 
 
    'use strict'; 
 

 
    var History; 
 

 
    var _createClass = (function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 
 

 
    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } 
 

 
    return { 
 
    setters: [], 
 
    execute: function() { 
 
     History = (function() { 
 
     function History() { 
 
      _classCallCheck(this, History); 
 

 
      this.heading = 'History'; 
 
     }; 
 

 
     return History; 
 
     })(); 
 

 
     _export('History', History); 
 
    } 
 
    }; 
 
});

<template> 
 
    <section class="au-animate"> 
 
    <h2>${heading}</h2> 
 
    <br> 
 
    <ul style="list-style-type:none"> 
 
     <li><button type="button" class="btn btn-info" style="margin:1px" click.delegate="dist/periods.js">Current Period</button></li> 
 
    <br> 
 
    <li><button type="button" class="btn btn-info" style="margin:1px">Past Period Mango</button></li> 
 
    <li><button type="button" class="btn btn-info" style="margin:1px">Past Period Pommelo</button></li> 
 
    <li><button type="button" class="btn btn-info" style="margin:1px">Past Period Kiwi</button></li> 
 
    <li><button type="button" class="btn btn-info" style="margin:1px">Past Period Clementine</button></li> 
 
    </ul> 
 
    </section> 
 
</template>

来源

2015-10-16 howManyWaysCanISayNewbie

是click.delegate="..."应该是你的视图模型的函数的事情。

然后，它应该是将show.bind="..."添加到正确的元素，并在您已委派点击的功能内切换该属性。

来源

2015-10-27 01:14:34

如何在Aurelia的同一区域点击按钮上的页面上的内容区域？

回答

相关问题