—»     —»   Калькулятор на knockout.js
  Раздел: Руководства   Комментариев: 1  

Калькулятор на knockout.js



Сегодня мы хотим поделиться с вами нашим первым руководством, посвященном knockout.js. Это одна из самых популярных Js-библиотек, которая позволяет нам использовать паттерн Model-View-View Model (MVVM) в наших веб-приложениях. Knockout – это расширяемая кросс-браузерная среда разработки, это новый взгляд на javascript-приложения. Основная суть заключается в разделении логики и презентации. Нам нужно создать модель и связать ее с презентацией. Для того чтобы связать View и ViewModel, используются атрибуты данных из HTML5. Для сегодняшнего демо мы при помощи knockout.js подготовили математический калькулятор.

Калькулятор на knockout.js

Демо | Скачать архив
Внимание! У вас нет прав для просмотра скрытого текста.


Этап 1. HTML

Это часть нашей презентации (html-разметка):

<script src="js/knockout-2.2.0.js"></script>
<div class="calculator">
<p>Math Calculator</p>
<h3 data-bind="text: commandline"></h3>
<div data-bind="foreach: numbers" class="numbers">
<button data-bind="value: val, text: val, click: $parent.addNumber"></button>
</div>
<div data-bind="foreach: commands" class="commands">
<button data-bind="value: command, text: command, click: $parent.addCommand, disable: $parent.hasNumbers"></button>
</div>
<button data-bind="click: doCalculate" style="width: 330px">=</button>
</div>
<script src="js/main.js"></script>

Наш калькулятор состоит из 10 кнопок с цифрами и 9 команд. Мы используем два набора: digits и commands (для генерации кнопок), вместо того, чтобы добавлять все это вручную. Теперь, нам нужно рассмотреть и понять Model для того, чтобы понять, как это работает.

Этап 2. JS

js/main.js

var CalculatorModel = function() {
var self = this;

// array of possible commands
self.commands = [
{command: ' + '},
{command: ' - '},
{command: ' * '},
{command: ' / '},
{command: 'sin', action: 'Math.sin(__param__)'},
{command: 'cos', action: 'Math.cos(__param__)'},
{command: 'tan', action: 'Math.tan(__param__)'},
{command: 'ln', action: 'Math.log(__param__)'},
{command: 'log', action: 'Math.log(__param__) / Math.log(10)'},
];

// array of possible numbers
self.numbers = [
{val: 1},
{val: 2},
{val: 3},
{val: 4},
{val: 5},
{val: 6},
{val: 7},
{val: 8},
{val: 9},
{val: 0},
];

// result command line
self.commandline = ko.observable('');

// last used command
self.lastCommand = ko.observable('');

// do we need cleanup?
self.needCleanup = ko.observable(false);

// add a number function
self.addNumber = function(e) {
if (self.needCleanup()) {
self.commandline('');
self.needCleanup(false);
}

// we don't need to add leading zeros
if (this.val == 0 && self.commandline() == '') {
return;
}
self.commandline(self.commandline() + this.val);
};

// add a command function
self.addCommand = function(e) {
if (e.action && self.commandline()) { // in case of commands which don't require a second value - we have to calculate a value
var newCommand = e.action.replace('__param__', self.commandline());
self.commandline(eval(newCommand));
self.needCleanup(true);
}

if (self.lastCommand() == '') { // put a command into command line
if (! e.action) {
self.commandline(self.commandline() + e.command);
}
self.lastCommand(e.command);
}
};

// calculation
self.doCalculate = function(e) {
self.commandline(eval(self.commandline()));

if (self.lastCommand() != '') {
self.lastCommand('');
}
self.needCleanup(true);
};

// disable buttons if we haven't added any numbers yet
self.hasNumbers = ko.computed(function() {
return self.commandline() == '';
}, self);
};

ko.applyBindings(new CalculatorModel());

Это модель нашего калькулятора: вначале мы определили два массива (commands и numbers). Они содержат все возможные цифры и действия (для наших кнопок). Как вы знаете, для обычных команд (вроде прибавления, вычитания, умножения и разделения) нам нужно использовать две цифры, а в случае с другими функциями (синус, косинус, тангенс и т.д.) – одну цифру. Нам пришлось использовать реальные javascript-команды в качестве значений поля action. Самая суть нашего калькулятора заключается в компоновке строк (математические действия) для пересчета. Если нам понадобится сложить два числа (например, 2 и 3), нам нужно будет сохранить 2+3 в качестве команды. И когда мы нажимаем кнопку «=» - нам нужно выполнить эту команду и отобразить результат. И теперь мы можем использовать foreach (в презентации) для отображения всех кнопок (с цифрами и действиями):

<div data-bind="foreach: numbers" class="numbers">
<button data-bind="value: val, text: val, click: $parent.addNumber"></button>
</div>
<div data-bind="foreach: commands" class="commands">
<button data-bind="value: command, text: command, click: $parent.addCommand, disable: $parent.hasNumbers"></button>
</div>

Как вы видите, мы можем использовать переменные (и даже функции) нашей Model в Presentation (модель DOM). Когда мы кликаем по кнопкам с цифрами, скрипт добавляет цифры, а когда мы кликаем по командам – скрипт использует эти команды для вычисления результата. Мы надеемся, что вы поймете остальную логику нашего приложения.

Этап 3. CSS-код

Наконец, хотелось бы рассказать вам о CSS-стилях нашего калькулятора:

css/main.css

.calculator {
/*css3 gradient*/
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */

display: block;
margin: 20px auto 0;
padding: 20px;
position: relative;
width: 340px;

/*css3 border radius*/
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

/*css3 shadow*/
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
}
.calculator button {
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
background-image: linear-gradient(top, #eeeeee, #cccccc);
border: 1px solid #ccc;
border-bottom: 1px solid #bbb;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
color: #333;
font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
margin: 5px;
padding: 8px 0;
text-align: center;
text-shadow: 0 1px 0 #eee;
width: 100px;
}
.calculator button:hover {
background-color: #dddddd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(top, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer;
text-shadow: 0 1px 0 #ddd;
}
.calculator button:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.calculator p {
margin-bottom: 15px;
text-align: center;
}
.calculator h3 {
background-color: rgba(255, 255, 255, 0.4);
height: 23px;
margin-bottom: 10px;
padding: 8px;
text-align: right;
}
.calculator div {
background-color: rgba(255, 255, 255, 0.4);
margin-bottom: 10px;

/*css3 border radius*/
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

Завершение

На сегодня пока все. Пока что мы только завершили разработку калькулятора. Если вам это понадобится, то функционал этого калькулятора невероятно легко расширить. Вам нужно лишь расширить Model (и добавить новые кнопки действий). Удачи!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript
Опубликовал Design FactoRy   Прочитано (раз): 5655   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 5 декабря 2012 @ 15:12
Написал: brainiac — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Статья не раскрывает сути ko. Из статьи крайне мало понятно о его работе. Ko создан для прозрачной, расширяемой, легко поддерживаемой, сложной клиентской логики. Главная суть состоит в том, что он использует observables, основан на наблюдении за изменением состояния элементов\данных, это главное что нужно понять в первое же знакомство. А калькулятор можно еще проще и на jquery написать...ko же позволяет делать очень сложные системы, то, чего jq не может или то, что на jq просто будет нереально дорого поддерживать.
PS связка какого-нить yii или ror + ko + jq просто сказка для разработчика.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31