Pull to refresh

Пример использования KnockoutJS

JavaScript *
Sandbox
День добрый, хабрасообщество!В статье будет рассмотрен процесс создания web-страницы редактирования списка пользователей. Готовый пример можно забрать тут. Статья является не обзорной, а приближенной к реальным боевым действиям, потому настоятельно рекомендую ознакомиться с простым примером.
Мне интересны детали
Total votes 42: ↑37 and ↓5 +32
Views 16K
Comments 14

Разработка приложения живого поиска по Twitter с помощью Knockout, jQuery и ASP.NET MVC 3

JavaScript *
Translation
Достаточно не тривиально разработать хорошо спроектированный front-end веб-приложения с уровнем отклика, производительностью и фичами, которые ожидают пользователи сегодня. Легко потеряться в кипящей смеси jQuery обработчиков событий, HTML разметки и AJAX вызовов и даже относительно простой GUI быстро может стать кошмаром для сопровождения.

Один из способов добавления некоторой структуры и порядка на клиентской стороне – использование фреймворка вроде Knockout. Knockout – это свободная Javascript библиотека с открытым исходным кодом, которая помогает реализовать Model-View-View Model (MVVM) паттерн на клиенте. Она хорошо документирована и официальный веб сайт великолепная точка старта с кучей реальных примеров, которые не только демонстрируют использование встроенных фич библиотеки, но и показывают, как расширить её свои собственными фичами.

В этом посте мы рассмотрим, как Knockout может быть использован совместно с плагином отображения, каким-нибудь jQuery и ASP.NET MVC 3 backend (или модель, как вам нравится) для построения простого, но эффективного приложения для живого поиска в Twitter.

Ок, сделаем это.
Total votes 24: ↑22 and ↓2 +20
Views 6.7K
Comments 17

Долгожданный Ciklum .NET Субботник — в Днепропетровске

Ciklum corporate blog
Еще один Сiklum Субботник — теперь по теме .NET пройдет 23 июля в Днепропетровске. Приглашаем практикующих разработчиков .NET-приложений для обмена опытом и знаниями в наш днепропетровский офис. Мы постарались сделать полезное мероприятие с условиями, комфортными не только для общения в неформальной обстановке, но и обучения и передачи опыта. Для этого мы пригласили спикеров не только из Днепропетровска, но и из .NET-сообществ других городов.
Интересности под хабракатом
Total votes 21: ↑17 and ↓4 +13
Views 3.2K
Comments 5

Knockout, практический опыт использования

JavaScript *
Некоторое время назад я обещал рассказать о нашем опыте работы с Knockout. Мы используем данную библиотеку в одном из проектов в течение последних 4 месяцев. Это немного, но за это время команда набрала некоторый опыт, который, я думаю, может быть интересен читателям.
Осторожно, много текста!
Total votes 62: ↑59 and ↓3 +56
Views 69K
Comments 23

KnockoutJS: Фильтрация списков на лету

JavaScript *
В минувшую субботу я имел честь читать доклад о MVVM и KnockoutJS на .NET Saturday в Днепорпетровске.
Доклад был достаточно тепло встречен публикой и у многих появились интересные вопросы,
которые не были раскрыты во время самого доклада.
Собственно говоря, я решил написать публичные ответы на некоторые из них на Хабре.

Сегодня я отвечу на вопрос о template-binding. «Как быть, если мне надо отобразить не все записи, а только подходящие определённым условиям».

Ответ находится под хабракатом.
Читать дальше →
Total votes 35: ↑32 and ↓3 +29
Views 11K
Comments 7

KnockoutJS: Ajax grid view с нуля в 40 строк

JavaScript *
В последнее время на Хабре все больше упоминаний о KnockoutJS, и я не останусь в стороне от этого тренда.
Сегодня я расскажу о том как сделать своими руками Ajax Grid View с фильтрацией и переходом по страницам написав, при этом, совсем немного кода.
Начиная писать эту статью я чувствовал себя несколько неловко, да и сейчас ощущение не ушло. Все дело в том, что сама библиотека простая, паттерн MVVM простой, и рассказывать я буду простые вещи. Я уверен, что в ближайшее время Knockout получит достаточно большое распространение. А неловко мне от того, что уже через год-дугой кто-то наткнувшись на эту статью будет обескуражен простотой изложенного материала. Примерно так, как любой из вас сейчас, открывший статью о jQuery от 2007 года.

Кто не испугался предполагаемого баяна, милости прошу под хабракат.

Читать дальше →
Total votes 39: ↑36 and ↓3 +33
Views 14K
Comments 22

Введение в MVVM и KnockoutJS (видео)

JavaScript *
В своей статье о фильтрации списков на Knockout я упоминал, что читал доклад о MVVM и KnockoutJS на .NET Saturday в Днепропетровске.

Совсем недавно подоспело видео и я спешу им поделиться. Хочу заранее немного оправдаться — поначалу я немного тараторил, но потом вошёл в ритм и вроде как всё было достойно.

Сам доклад разделён на 2 части:
  1. рассказ о MVVM с разбором практического примера, как сей паттерн может облегчить жизнь при разработке UI
  2. написание простенького приложения на Knockout в live-режиме. Эта часть доклада всем понравилась больше чем первая, но за несколько моих «затупов» я до сих пор краснею :-)


Посмотреть видео доклада

PS 1: слайды можно скачать тут: bit.ly/qX61m2
PS 2: если вдруг кому нужны исходники демо-проекта — я выложу. Но их как минимум причесать надо
Total votes 8: ↑7 and ↓1 +6
Views 5.2K
Comments 1

KnockoutJS: сказ о том, как легко принимать или отклонять изменения

JavaScript *
Довольно часто в пользовательском интерфейсе есть кнопки «Сохранить» и «Отмена». Особенно часто эти кнопки используются в формах. Несмотря на то, что в современном мире всё идёт к упрощению интерфейса, но на эти кнопки всё равно есть спрос.

Сегодня я предлагаю разобраться как с помощью KnockoutJS принимать и откатывать изменения для индивидуальных observables так и целых view models.

Знакомые с KnockoutJS сразу могут выдать две ссылки на лучший блог о сабже

У этих методов есть как плюсы, так и вполне существенные недостатки, от которых нужно избавлятся. Недостатки с функциональной точки зрения
  • Dirty flag — не позволяет сохранять изменения, а только сбросить их в начальное состояние.
  • protectedObservable — никто не видит изменений observable до тех пор, пока не произойдёт commit. Это ограничение сильно удручает при использовании dependent observables, к примеру.

Ну и к тому же, они нацелены на индивидуальные observable'ы, а хотелось бы работать с несколькими полями сразу.

Под катом детально разберём процесс создания простого механизма, который сделает работу с принятием и отменой изменений простой и прозрачной.

Читать дальше →
Total votes 35: ↑33 and ↓2 +31
Views 7.8K
Comments 13

Первый тренинг по KnockoutJS от Романа Гомолко в Днепропетровске

Ciklum corporate blog JavaScript *
Дорогие Хабра-читатели,

Спешим похвастаться, что в субботу, 24 Марта, Днепропетровский офис Ciklum принимает в гостях однодневный тренинг Романа Гомолко (romanych) по KnockoutJS.

Выяснить больше деталей о программе мероприятия, целевой аудитории, организации, а также зарегистрироваться вы можете пройдя по ссылке: http://knockoutjs.in.ua/training/

Поскольку тренинг будет проходить на нашей территории, сотрудники Ciklum получат скидку на участие.
Total votes 12: ↑6 and ↓6 0
Views 2.9K
Comments 7

Knockout MVC — Сила Knockout.js для ASP.NET MVC

Enterra corporate blog JavaScript *.NET *C# *
knockoutmvcДля тех кто не в курсе, Knockout.js — это популярная JavaScript библиотека, позволяющая реализовать Model-View-View Model (MVVM) паттерн на клиенте. На Хабре уже много писали про него (раз, два, три, четыре, пять, видео). Освоить Knockout.js можно очень быстро — ведь есть система интерактивного обучения, куча живых примеров (можно потыкать и посмотреть исходный код) и прекрасная документация.

Очень часто Knockout.js используют в связке с ASP.NET MVC — ведь библиотека существенно упрощает написание клиентской логики. Однако, возникает много типичных проблем для клиент-серверной разработки: основную модель и часть логики её обработки приходится описывать как на клиенте (JavaScript), так и на сервере (C#/VB). Кроме того, есть рутинная часть, связанная с обращением клиента к серверным методам и передачи им модели для обработки. Но не стоит печалиться! Теперь у нас есть Knockout MVC — это .NET оболочка для Knockout.js, которая генерирует весь нужный JavaScript-код за нас. Нам остаётся только описать нашу модель на C# и в MVVM-стиле указать для каждого нужного html-элемента к какому свойству модели нужно привязаться (а можно указать и целые выражения — они будут транслированы в js). Таким образом, можно получить полноценное кроссбраузерное клиентское веб-приложение без единой строчки JavaScript!
Читать дальше →
Total votes 37: ↑30 and ↓7 +23
Views 53K
Comments 24

KnockoutJS: фильтрация списка с сохранением состояния

JavaScript *
Tutorial


Если вы хорошо смыслите в KnockoutJS и JavaScript не проходите мимо!, нам нужны ваши знания.

Новичок, не пропусти. В комментариях к этому посту будут советы о том, как правильно писать на KnockoutJS.

Есть: фильтрация списка с сохранением состояния фильтров в Cookie.
Ищем: Лучшие практики KnockoutJS, чтобы не плодить плохой код.

Предостережение: редко пишу статьи, из-за чего оформление страдает. Не пугайтесь. Присылайте ошибки и рекомендации по оформлению в личку. Спасибо.

Скриншот




Читать дальше →
Total votes 32: ↑23 and ↓9 +14
Views 12K
Comments 31

Пишем сложное приложение на knockoutjs

Website development *JavaScript *
Tutorial
Есть такая библиотека knockout.js. Она отличается от прочих хорошим туториалом для начинающих и кучей понятных рабочих примеров. Еще там стройная MVVM модель, декларативные связи и так далее.

Короче, если вы, как и я, поиграли с этой библиотекой, понаписали красивых формочек, и вам это понравилось, то все это дело захотелось применить на реальном проекте. И тут проблема — в реальном проекте формочек больше чем одна. А раз такие инструменты, то хочется single web page application и никак иначе. А делать один контроллер и все темплейты заверстывать на одну страницу тоже тупо и тормозно.

Под катом приведу основу своего сложного приложения. Само оно совсем не сложное, но модульное и допускает расширения, а темплейты и модели подгружаются динамически. Идея была подсмотрена в этой презентации — http://www.knockmeout.net/2012/08/thatconference-2012-session.html, код презентации выложен на github — https://github.com/rniemeyer/SamplePresentation — на базе этого кода будем писать свой.
Читать дальше →
Total votes 43: ↑38 and ↓5 +33
Views 46K
Comments 21

Вышел KnockoutJS 2.2.0

JavaScript *.NET *
Steve Sanderson сообщает о релизе следующей версии knockoutjs.

Как всегда в таких случаях исправленно много ошибок, оптимизированна структура кода, настроена производительность и так далее.

О новых возможностях под катом
Читать дальше →
Total votes 26: ↑25 and ↓1 +24
Views 6.7K
Comments 5

Применение, советы и особенности knockout.js

Website development *JavaScript *
О библиотеке knockout.js на хабре написано не так много, но кое что есть (и конечно же есть официальный туториал и другие материалы на оф. сайте и хороший ресурс на англ. языке knockmeout.net, статьи которого смогу перевести, если будет спрос). Данная статья возможно перерастёт в цикл статей по javascript и нокауту, если нло не похитит меня.

Изначально готовил материал для людей, уже знакомых с нокаутом и mvvm, но в комментариях к другим статьям меня попросили рассказать как готовить нокаут для чайников. Предполагаю, что вы уже прочитали предыдущие статьи о нокауте на хабре. Поехали!
Читать дальше →
Total votes 37: ↑37 and ↓0 +37
Views 64K
Comments 27

Ключевое отличие AngularJS от Knockout

Website development *JavaScript *Angular *
imageЗа последнее время я несколько раз успел поучаствовать в дискуссиях о том, чем Angular лучше или хуже Knockout и других JS-фреймворков. И очень часто я сталкивался с тем, что есть некоторое непонимание сути различий в подходах, заложенных в эти продукты. Иногда дело доходило даже до того, что в качестве преимущества Knockout приводились валидные по умолчанию префиксы «data-», что ну просто совсем смешно (не говоря уж о том, что их можно использовать и в Angular).

Хочу один раз зафиксировать в этой статье некоторые мысли, на которые потом можно было бы просто давать ссылку. По моему мнению, действительно ключевых отличий AngularJS от разных других фреймворков существует три штуки в разных комбинациях:

  1. Модульная организация кода, тестируемость и жестокая война с любыми глобальными данными.
  2. Пропаганда декларативного подхода через создание собственных HTML-директив.
  3. Механизм проверки изменения данных в дата-биндинге без использования коллбэков.

И третий пункт мне здесь видится наиболее сложным для понимания. Поговорим именно о нем.
Читать дальше →
Total votes 68: ↑66 and ↓2 +64
Views 47K
Comments 64

Knockoutjs. «Растим» дерево

Website development *JavaScript *
Tutorial

Судя по частоте появления статей, KnockoutJS набирает популярность на Хабре. Внесу и я свою лепту. Хочу осветить тему нестандартных для HTML элементов управления и «дерева» в частности. Под деревом здесь понимается аналог элемента управления TreeView. Статья подразумевает, что читатель уже знаком с KnockoutJS на базовом уровне. Публикация может рассматриваться, как пособие для изучения KnockoutJS. С другой стороны, надеюсь, и опытные пользователи KnockoutJS смогут почерпнуть для себя что-то новое.
Читать дальше →
Total votes 11: ↑9 and ↓2 +7
Views 15K
Comments 7

Оптимизация knockoutjs при динамическом добавлении и удалении темплейтов

JavaScript *HTML *
Сразу предупреждаю, что статья рассчитана только для тех кто использует либо собирается использовать knockoutjs. Предполагается, что читатель уже знает что это такое и для чего он нужен.

В одном своем проекте я решил использовать knockout.js. Все было хорошо и даже замечательно, пока данных было мало и вызовы computed методов были не ресурсоемки. Но потом данных становилось все больше и появились вычисления, которые занимали заметное для глаза время. Пытаясь решить эту проблему, я разделил страницу на вкладки. Переходя на отдельную вкладку я менял темплейт и таким образом логично ожидал что уменьшится число вычислений computed значений при изменении какого-либо observable значения. Но не тут-то было. Оказалось, что особенность фреймворка такова, что перерасчет значений происходит даже тогда, когда темплейт полностью удаляется из дом модели.

Хочу посмотреть пример и решение проблемы
Total votes 6: ↑4 and ↓2 +2
Views 5.1K
Comments 27

ASP.NET MVC, WebApi, SignalR и UnityContainer

.NET *ASP *C# *
Tutorial
Известно, что все хорошие джедаи используют внедрение зависимости (перевод) в своих проектах, это увеличивает концентрацию мидихлориан в крови и тестируемость кода в приложении. В данной статье я хочу рассмотреть некоторые аспекты использования UnityContainer в ASP.NET приложении, а именно, использование инжекции зависимостей через конструкторы контроллеров в ASP.NET MVC и WebApi и хабов в SignalR. Пример приложения присутствует.

Dependency Injection - Golf analogy
Читать дальше →
Total votes 19: ↑18 and ↓1 +17
Views 31K
Comments 13

Асинхронные шаблоны в Knockout.JS

JavaScript *
Sandbox
Knockout.JS — хорошая библиотека для создания сложных веб-приложений. Долгое время мне в ней не хватало асинхронного механизма шаблонов. Реализовать его не получалось, пока я не узнал что window.setTimeout вызывает свой callback не раньше окончания работы текущего контекста. Т.е. в коде
setTimeout("console.log(window.Value)",0),(function (){while (Math.random() < 0.9999999);window.Value = 1;})()
вывод на консоль произойдет только после завершения долгой функции случайного поиска числа очень близкого к единице.
Статья для разбирающихся в механизме биндинга knockout.js и умеющих писать customBindings.
Реализация
Total votes 14: ↑10 and ↓4 +6
Views 11K
Comments 12

Angular.js + Knockout.js

Angular *
Недавно я перешел с knockout.js на angular.js, оба инструмента мне нравятся, но в каждом из них есть свои преимущества перед «конкурентом».
И тут выпал скучный вечер, решил я, just for fun, слепить свой MV* инструмент.

Мне не очень нравятся разухабистые фреймворки, я отдаю предпочтение библиотекам, и от angular мне в основном нужно было 2 вещи: scope — данные и их мониторинг, applyBindings — привязать этот scope к DOM.
Читать дальше →
Total votes 4: ↑4 and ↓0 +4
Views 9.4K
Comments 2
1