четверг, 30 апреля 2015 г.

Как решить проблему с input и ng-model в AngularJS

Недавно столкнулся с такой проблемой, заказчику нужно чтобы при редактировании поля инпут, можно было удалить полностью значение и вставить новое, а как мы знаем ng-model у нас меняется синхронно с тем что у нас в инпуте, и получается так что удаляя символы тут же меняется модель, а необходимо чтобы она менялась только при потере фокуса. Но также необходимо чтобы если что-то другое меняет эту же модель изменения сразу же применялись в в нашем инпуте. вот такая вот незадача.

Решение:

Создаем  для инпута отдельную модель, также создаем функцию которая будет менять основную модель при событии потери фокуса. То есть когда мы стираем значение ничего не происходит, но как только потеряли фокус  тут же основная модель перезаписывается. Для поведения в обратную сторону ставит наблюдателя на основную модель и как только она меняется, перепишем модель инпута. Вот и все.

$scope. money = {

    inputValue : 100,

    value : 100,

    inputChanged:  function(){

     this.value = this.inputValue;

    }

}



$scope.$watch('money.value', function(newValue){

    $scope.money.inputValue = newValue;

})



<input type="text" ng-blur="money.inputChanged()" ng-model="money.inputValue">

              <button ng-click="plus(money)">+</button>

              {{money.value}}

              <button ng-click="minus(money);">-</button>



четверг, 17 июля 2014 г.

Ember тестирование

Когда я начал играться с Ember.js почти год назад, тестирируемость оставляла желать лучшего . Вы могли использовать модульное тестирование объекта без каких-либо проблем , но модульный тест только один способ получить обратную связь , когда вы создаете программный продукт . В дополнение к юнит-тестам , я хотел проверить интеграцию различных компонентов . Так как большинство людей тестирующих насыщенных приложений JavaScript , я потянулся к матери всех инструментов тестирования, Selenium.


Теперь , прежде чем я колотить его , без надлежащего введения , стоит отметить, что Selenium является отличным способом , чтобы убедиться что всё веб-приложение работает с Full production , как c базой данных так и всех ваших development зависимостей и т.д. И с точки зрения обеспечения качества , Selenium может быть мощным инструментом для команды, нуждающихся end-to-end приемочные испытаний пользовательского интерфейса.


Но с течением времени, казалось бы, небольшие тесты построенные на Selenium могут превратить скорость вашей команды, в темпе улитки . Есть один простой способ , уменьшить эту боль , во первых избегайте разработку большого приложения . Если вы разрабатываете горсть мелких веб-приложений вместо одного большого, это может помочь держать вас на плаву немного дольше, because no individual build will crush the team, as you grow.


Но даже на небольшом проекте , реальная проблема с Selenium является то, что он не является частью процесса TDD . Когда я делаю red/ green/ refactor у меня нет времени для медленной обратной связи в любой форме . Мне нужен был способ, чтобы написать модуль и интеграционные тесты, которые обеспечат быструю обратную связь, чтобы помочь мне формировать программы которые я написал в более итерационным образом . Если вы используете версию Ember.js > = RC3 , вам повезло , потому что писать модульный тест является прогулкой по частям данной статьи .

пятница, 11 июля 2014 г.

7. Используем фикстуры

Теперь мы добавим фикстуры. Фикстуры - тестовые статические данные для тестирования нашего приложения, прежде чем подключать реальные данные.

Во-первых, отредактировать  js/application.js чтобы указать, что ApplicationAdapter вашего приложения является продолжением DS.FixtureAdapter. Адаптеры ответственные за поддержание связи с источником данных для вашего приложения. Как правило, это будет API веб-сервиса, но в данном случае мы используем адаптер, предназначенный для загрузки тестовых данных:

6. СОЗДАЕМ МОДЕЛЬ ДАННЫХ


Затем мы создадим класс модели для описания Todo элементов.

Создайте файл в js/model/todo.js а затем вставьте следующий код внутри:

Todos.Todo = DS.Model.extend({
 title: DS.attr('string'),
 isCompleted: DS.attr('boolean')
});

5. ДОБАВЛЯЕМ ПЕРВЫЙ МАРШРУТ И ШАБЛОН



Далее, мы создадим приложение Ember.js, маршрут ('/'), а также переконвертируем наш статический макет в Handlebars  шаблон.

Внутри каталога js, добавьте файл приложения application.js и файл маршрутизатора router.js. Вы можете разместить эти файлы где угодно (даже просто положить весь код в один файл), но это руководство предполагает, что вы разделили их на  файлы и назвали их, как указано.


Внутри js/application.js добавьте следующий код:

window.Todos = Ember.Application.create();

Это создаст новый экземпляр Ember.Application и сделать его доступным в качестве переменной имени Todos в JavaScript среде браузера.
Внутри JS / router.js добавьте следующий код:

Todos.Router.map(function() {
 this.resource('todos', { path: '/' });
});

4. ПОЛУЧЕНИЕ EMBER.JS ЗАВИСИМОСТЕЙ



TodoMVC имеет следующие зависимости:

Для этого примера, все эти ресурсы должны храниться в папке js/lib, расположенных в том же месте, index.html. Обновите index.html загрузить эти файлы, помещая теги <script> непосредственно перед закрытием </ BODY> тег в следующем порядке:

3. Создание статического макета

Перед добавлением любого кода, мы можем примерно набросать макет нашего приложения. В текстовом редакторе, создайте новый файл и назовите его index.html. Этот файл будет содержать HTML шаблоны нашего приложения и ссылки на дополнительные ресурсы изображения, стили и JavaScript.

Для начала, добавить следующий текст в index.html: