Возникает вопрос, где описывать те самые рычажки за которые будет оболочка дергать логику а логика оболочку? Конечно же в структуре,
ОПИШЕМ ЭТИ СВЯЗИ:
<div class="calculator">
<div class="calculator_display">{{this.display}}</div> <!-- В дисплее отображается дисплей -->
<table class="calculator_buttons">
<tr>
<td class="calculator_buttons_i" onclick="this.pushNumber(7)">7</td>
<td class="calculator_buttons_i" onclick="this.pushNumber(8)">8</td>
<td class="calculator_buttons_i" onclick="this.pushNumber(9)">9</td>
<td class="calculator_buttons_i" onclick="this.pushPlus()">+</td>
</tr>
<tr>
<td class="calculator_buttons_i" onclick="this.pushNumber(4)">4</td>
<td class="calculator_buttons_i" onclick="this.pushNumber(5)">5</td>
<td class="calculator_buttons_i" onclick="this.pushNumber(6)">6</td>
<td class="calculator_buttons_i" onclick="this.pushMinus()">-</td>
</tr>
<tr>
<td class="calculator_buttons_i" onclick="this.pushNumber(1)">1</td>
<td class="calculator_buttons_i" onclick="this.pushNumber(2)">2</td>
<td class="calculator_buttons_i" onclick="this.pushNumber(3)">3</td>
<td class="calculator_buttons_i" onclick="this.pushMultiply()">*</td>
</tr>
<tr>
<td class="calculator_buttons_i" onclick="this.pushEqually()" colspan="3">=</td>
<td class="calculator_buttons_i" onclick="this.pushDivide()">/</td>
</tr>
</table>
</div>