Рубрика «knockoutjs»

Абсолютно все пользователи Magento 2 обратили внимание на обновленный интерфейс админ панели. В этой статье я хотел бы рассмотреть новый интерфейс Grid страниц и главное, как можно создать свою собственную Grid страницу с подробным описанием.
Читать полностью »

Насколько сложно построить полноценный сервис email-маркетинга? Что для этого нужно предусмотреть? Какие подводные камни могут встретиться на пути пытливых умов разработчиков?

Что нам стоит сервис email-маркетинга построить? Взгляд изнутри, часть первая - 1

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

Сразу оговорюсь, что в статье рассмотрена только техническая сторона вопроса.
Читать полностью »

Добрый день.

Понравилась атрибутная регистрация компонентов в angular2 и захотелось сделать подобное в проекте с knockoutjs.

@Component({
    selector: "setup-add-edit-street-name",
    template: require("text!./AddEditStreetName.tmpl.html"),
    directives: [BeatSelector]
})
export class AddEditStreetNameComponent extends AddEditModalBaseComponent<StreetNameViewModel> {
    constructor(@Inject("params") params, streetNameService: StreetNameService) {
        super(params, streetNameService);
    }
    
    location = ko.observable()
}

Компоненты в нокауте появились довольно давно. Тем не менее, отсутствие встроенной поддержки dependency injection, как и необходимость отдельной регистрации компонент несколько раздражала.
Читать полностью »

Если вы кого-нибудь спросите, на чем он делает клиентскую сторону своих приложений сегодня, этот человек наверняка ответит, что использует какой-нибудь хипстерский JS-фреймворк, вроде Angular, Ember, Knockout, Backbone или Polymer (смотрите сайт TodoMVC).

У большинства этих фреймворков есть «отличная» возможность, которая позволяет вам «легко» ссылаться на какую-либо информацию, используя дата-биндинги. Они выглядят примерно так:

<!-- Knockout -->
<p>Имя: <input data-bind="value: firstName" /></p>
<p>Фамилия: <input data-bind="value: lastName" /></p>
<h2>Привет, <span data-bind="text: fullName"> </span>!</h2>

<!-- Angular -->
<ul class="phones">
	<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
		<span>{{phone.name}}</span>
		<p>{{phone.snippet}}</p>
	</li>
</ul>

<!-- Ember -->
<div>
	<label>Имя:</label>
	{{input type="text" value=name placeholder="Введите ваше имя"}}
</div>
<div class="text">
	<h1>Меня зовут {{name}} и я хочу выучить Ember!</h1>
</div>

Читать полностью »

Предлагаю вашему вниманию простой custom binding для KnockoutJS для реализации popover'ов из Twitter Bootstrap.

Демо

Единичный случай использования

<span data-bind="popover: true" class="ko-popover"
    data-popover-placement="bottom"
    data-popover-title="knockout-popover"
    data-popover-content="Awesome knockout-popover plugin">
        knockout-popover (hover over me :)
</span>

Читать полностью »

Несколько месяцев назад я начал осваивать популярный PHP фреймворк Symfony2. Недавно передо мной встала задача проверки корректность заполнения формы на стороне клиента с применением библиотеки KnockoutJS. При этом правила валидации, дабы не заниматься дублированием кода, желательно брать из класса сущности Symfony.
Существует over 10.000 плагинов, библиотек и бандлов охватывающих какую-либо одну сторону проблемы. Комплексного решения мне найти так и не удалось. Оценив трудоёмкость объединения двух наиболее популярных решения (Knockout-Validation и APYJsFormValidationBundle) для первой и второй части задачи я решил написать всё с нуля. Подробности под катом.
Читать полностью »

Добрый день уважаемые, читатели.
В данной статье я хочу поделиться с вами своим опытом работы с такими фреймворками как AngularJS и Knockout.
Cтатья будет интересна тем, кто хорошо знаком с JavaScript-ом и имеет представление хотя бы об одном из упомянутых фреймворков и естественно желает расширить свой кругозор.

Читать полностью »

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

Мне не очень нравятся разухабистые фреймворки, я отдаю предпочтение библиотекам, и от angular мне в основном нужно было 2 вещи: scope — данные и их мониторинг, applyBindings — привязать этот scope к DOM.
Читать полностью »

Knockout.JS — хорошая библиотека для создания сложных веб-приложений. Долгое время мне в ней не хватало асинхронного механизма шаблонов. Реализовать его не получалось, пока я не узнал что window.setTimeout вызывает свой callback не раньше окончания работы текущего контекста. Т.е. в коде

setTimeout("console.log(window.Value)",0),(function (){while (Math.random() < 0.9999999);window.Value = 1;})()

вывод на консоль произойдет только после завершения долгой функции случайного поиска числа очень близкого к единице.
Статья для разбирающихся в механизме биндинга knockout.js и умеющих писать customBindings.
Читать полностью »

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

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

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js