Мощь селекторов 2

disclaimer: для эффективного использования IML необходимо понимать принцип работы selector‘ов и знать область их применения, поэтому в этой статье будут рассмотрены все аспекты, связанные с их работой.

Runtime

IML – это декларативный язык, который описывает сценарий выполнения кода на клиентской стороне (браузер) в момент наступления события, указанного в When(), что позволяет получать значения DOM-элементов в runtime и потом использовать их в выражениях и операциях.

Если переменную firstValue использовать на серверной стороне (controller, query или command), то вместо ожидаемого значения DOM-элемента мы получим только путь (jquery selector) к нему, но не значение. Когда эта переменная используется в рамках IML, мы получаем именно значение элемента на момент выполнения кода.

примечание: для интерактивного ознакомления можно использовать тестовую панель.

Где применяется?

Спектр применения Selector‘ов ограничен, поэтому ниже приведены все поддерживаемые сценарии:

  1. With – позволяет выбирать элемент, к которому будут применены действия в теле обратного вызова.

К примеру:

  1. Selfметод Self() является “быстрой” версией With(r=>r.Self()).
  1. Url – позволяет построить путь (Uri) к соответствующему Action, Query или Command. В качестве примера приведена часть IML конструкции, которая выполняет Ajax-запрос на url PostDischarge/Get с параметрами:

примечание: из всех параметров только isReadOnly является допустимым в ASP.NET MVC параметром, потому что все остальные – это ссылки (jquery селекторы) на DOMэлементы. Построение адреса выполняется в момент наступления события, которое указано в When() (в примере это Click), что позволяет динамически строить адрес на основе введенных пользователем данных.

  1. Параметры – большинство методов поддерживают селекторы:

  1. Условия – позволяют использовать значения в выражениях:

Какие данные доступны?

Incoding Selector покрывает все основные сценарии Jquery, а именно: выборки по Id, Name, Tag, Expression, работу с деревом (filter, find, closets , parent), помимо jquery есть средства для работы со специальными данными, такими как hash, cookies, query string.

1. Значения DOM-элементов

  • val для input.
  • val для select.
  • val, как массив для select[multiple=”multiple”].
  • is(“:checked”) для  checkbox.
  • Если под одним именем много checkbox, тогда value.

примечание: IML определяет тип элемента, найденного по селектору, и на основе этого решает каким способом получить значение, что абстрагирует Вас от этой проблемы.

2. Метод

примечание: можно, используя C# extensions, написать свои реализации, то есть на стороне клиента Вы пишите Jquery function поверх коллекции объектов, а на C# будете вызывать ее.

3. Специальные селекторы

У специальных селекторов нет аналогов в jquery, поэтому ниже приведены описания таких selector’ов.

  • Selector.Jquery.Self() – IML конструкция всегда интегрируется в DOM-элемент, что позволяет получить к нему доступ. По принципу работы self является аналогом event.target.
  • Selector.Incoding – отвечает за получение данных, которые хранятся не в DOM-элементах, а в location, cookies или доступны по запросу на сервер.

примечание: указанный Url в Selector.Incoding.Ajax должен возвращать IncJson (IncodingResult.Success) или IncView.

  • Selector.JS – используется для получения значений, доступных в JavaScript, таких как DateTime, Document, GeoLocation, а также для выполнения кода JavaScript.

Лучшие практики

В этом разделе собраны советы, которые были выработаны на основе процесса применения Incoding Framework на реальных проектах.

1.Типизация – отличие построения jquery selector’а с использованием IML от JavaScript в том, что можно использовать возможности C#, а в частности generic.

Ниже приведено сравнение обоих способов записи, где видно, что длина типизированных конструкций несколько больше, но преимущества поддержки Intellisense и ReSharper Refactor полностью оправдывают этот недостаток.

[table sort=”desc,asc”]
Обычный,Generic

Selector.Jquery.Name(“password”), Selector.Jquery.Name<T>(r=>r.Password)

Selector.Jquery.Id(“password”), Selector.Jquery.Id<T>(r=>r.Password)

Selector.Incoding.QueryString(“code”), Selector.Incoding.QueryString<T>(r=>r.Code)

[/table]

справка: в версии 2.0 появится возможность использовать текущую модель объявленную во View (inc–195).

2. Jquery.Self() – в разделе про специальные селекторы подробно рассказано про Self. Ниже приведены примеры сценариев, где используя Self, можно избежать добавления Id для DOM-элементов:

    • dsl.Self().Core().Insert.Html() – вставка в текущий элемент.
    • dsl.Utilities.Window.Alert(“Element not checked”).If(r=>r.Is(() => Selector.Jquery.Self() == false)) – текущее значение элемента в условие.
    • Url.Action(“Search”, “Customer”,new{ name = Selector.Jquery.Self() }) – текущее значение элемента в запросе.
    • dsl.With(r=>r.Self().Closest(selector=>selector.Tag(HtmlTag.Tr))) – найти тэг Tr, который будет первым от текущего элемента.
      Также Self можно использовать для Filter, Parent и других.

3. Группировка – чтобы применить к нескольким DOM-элементам одинаковый набор исполнителей, есть возможность по аналогии с jquery собирать набор целевых элементов:

примечание: код демонстрирует, способ применения действия (установка style diplay=”none“) к нескольким наборам jquery selector. Метод Add является аналогом jquery add, также многие селекторы позволяют делать выборку по нескольким значениям, например Selector.Jquery.Id(“Id1″,”Id2″) или Selector.Jquery.Class(“class1″,”class2″).

4. Сложные селекторы – IML selector позволяет строить все поддерживаемые jquery селекторы, однако не стоит строить очень сложных selector’ов, потому что всегда можно использовать selector по Id.

5. Не поддерживает? – IML имеет много готовых селекторов, которые покрывают большинство сценариев, но также имеет возможности расширения и добавления своих.

        5.1  C# extensions 

примечание: данный код взят из исходников Incoding Framework.

      5.2   Selector Jquery  Custom

     5.3  Selector JS Eval

 6. Переменные – позволяют убрать дубляж путем использования C# переменных на View

примечание: пример демонстрирует один из способов того, как можно использовать возможности C# для упрощения кода.

Вывод

Incoding Selector покрывает большинство сценариев работы и имеет возможность написать свои расширения или использовать низкоуровневые методы Eval и Custom.

Vlad Kopachinsky

I am a Senior developer at Incoding Software in Russian Federation. I created the Incoding Framework for rapid development

More Posts - Website - Twitter - Facebook - LinkedIn

2 thoughts on “Мощь селекторов

  1. Vnuuk 13.10.2013 Sun, 13 Oct 2013 09:54:00 +0000

    По поводу Selector.Js.Call.. первый параметр – имя функции на javascript. За что отвечает второй параметр “key”?

    • Vlad Kopachinsky 13.10.2013 Sun, 13 Oct 2013 10:21:00 +0000

      “Key” я привел в качестве примера, произвольных параметров для
      функции, подчеркнув тот факт, что используя Eval ( или Call ) всегда
      можно решить проблему не достающего функционала.

Leave a Reply