如何在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的同一區域點擊按鈕上的頁面上的內容區域？

回答

相關問題