在與Aurelia相同的區域中單擊按鈕時，如何切換頁面上的內容區域？

Question

我需要添加什么，以便當用戶單擊“ Current Period按鈕時，整個區域（為清楚起見，在第二個圖像中以陰影顯示）被periods.js和periods.html控制的頁面內容替換了？ 我已經嘗試過click.delegate （顯示在下面的第二段代碼中），並做了其他徒勞的嘗試。 任何提示將不勝感激。 隨時告訴我是否需要顯示更多代碼。 謝謝！

這是第一張圖片： 頁面外觀

這是第二張圖像： 陰影區域

 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> 

Answer 1

click.delegate="..."應該是您的視圖模型的功能。

然后，應該在正確的元素上添加show.bind="..."並在將點擊委派給的函數中切換該屬性。