@GuyRitchie

Как в данном случае оптимизировать AMP?

hi! суть проблемы такова: есть amp-bind, благодоря которому я могу вешать события на клики, есть 2 селекта в вёрстке с данными событиями... если не назначать разные amp-state для каждого селекта( который добавляяет либо убирает класс) то при клике на 1 также происходят действия и со вторым... как можно это улучшить, писать amp-state Для каждого элемента(просто зачем если они выполняют одно и тоже)
<amp-state id="ui_searchForm"><script type="application/json">false</script></amp-state>
  <amp-state id="ui_reset"><script type="application/json">false</script></amp-state>
  <amp-state id="ui_filterPane"><script type="application/json">false</script></amp-state>
  <amp-state id="ui_sortPane"><script type="application/json">false</script></amp-state>


  <amp-state id="ui_reset2"><script type="application/json">false</script></amp-state>
  <amp-state id="ui_filterPane2"><script type="application/json">false</script></amp-state>
  <amp-state id="ui_sortPane2"><script type="application/json">false</script></amp-state>



  <amp-state id="city_sort" aria-hidden="true">
    <script type="application/json">"city-sort-all"</script>
  </amp-state>

  <amp-state id="category_sort" aria-hidden="true">
    <script type="application/json">"category-sort-all"</script>
  </amp-state>




  <header class="fixed">

  </header>

  <div class="wrap-column fixed fixed-bottom">

    <button class="btn btn-search btn-green b-border-radius" role="button" tabindex="0" on="tap:AMP.setState({ui_searchForm: !ui_searchForm})">Search on Rentin</button>

  </div>




  <div class="search-form" [class]="'search-form' + (ui_searchForm ? ' search-form-visible' : '')">
    <div class="wrap-column">
      <div class="search-form-head clearfix">
        <div class="col col-12 col-right">
          <button class="btn btn-close b-border-radius" role="button" tabindex="0" on="tap:AMP.setState({ui_searchForm: !ui_searchForm})">Close</button>
        </div>
      </div>


      <div class="col col-12">

        <div class="mob-label">
          City
        </div>

        <div class="mobile-select b-border-radius" role="button" tabindex="0" on="
        tap:AMP.setState({
          ui_filterPane: false,
          ui_reset: false,
          ui_sortPane: !ui_sortPane
        })">
          <span [class]="city_sort == 'city-sort-all' ? '' : 'hide'">
            All city
          </span>
          <span class="hide" [class]="city_sort == 'city-sort-dubai' ? '' : 'hide'">
            Dubai
          </span>
          <span class="hide" [class]="city_sort == 'city-sort-ajman' ? '' : 'hide'">
            Ajman
          </span>

          <div class="mobile-select-body" [class]="'mobile-select-body b-border-radius' + (ui_sortPane ? ' mobile-select-body-visible' : '')">
            <amp-selector class="travel-list-selector" layout="container" name="sort" on="
                        select:AMP.setState({
                          query_sort: event.targetOption,
                          city_sort: event.targetOption
                        })
                      " [selected]="city_sort">
              <div class="mobile-select-option col-left b-border-radius" option="city-sort-all" selected="">All city</div>
              <div class="mobile-select-option col-left b-border-radius" option="city-sort-dubai">Dubai</div>
              <div class="mobile-select-option col-left b-border-radius" option="city-sort-ajman">Ajman</div>
            </amp-selector>
          </div>

        </div>

      </div>

       <div class="col col-12">

        <div class="mob-label">
            Category
        </div>

        <div class="mobile-select b-border-radius" role="button" tabindex="0" on="tap:AMP.setState({ui_filterPane2: false, ui_reset2: false, ui_sortPane2: !ui_sortPane2})">
          <span [class]="category_sort == 'category-sort-all' ? '' : 'hide'">
            All categories
          </span>
          <span class="hide" [class]="category_sort == 'category-sort-realEstate' ? '' : 'hide'">
              Real estate
          </span>
          <span class="hide" [class]="category_sort == 'category-sort-cars' ? '' : 'hide'">
              Cars
          </span>

          <div class="mobile-select-body" [class]="'mobile-select-body b-border-radius' + (ui_sortPane2 ? ' mobile-select-body-visible' : '')">
            <amp-selector class="travel-list-selector" layout="container" name="sort" on="
                        select:AMP.setState({
                          query_sort: event.targetOption,
                          category_sort: event.targetOption
                        })
                      " [selected]="category_sort">
              <div class="mobile-select-option col-left b-border-radius" option="category-sort-all" selected="">All categories</div>
              <div class="mobile-select-option col-left b-border-radius" option="category-sort-realEstate">Real estate</div>
              <div class="mobile-select-option col-left b-border-radius" option="category-sort-cars">Cars</div>
            </amp-selector>
          </div>

        </div>

      </div>






    </div>
  </div>
  • Вопрос задан
  • 36 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы