Как перевернуть/переключить виджет Dashing по клику

Я видел, как это делается на нескольких веб-страницах (например, на fitbit), где виджет переворачивается для отображения новой информации при нажатии на него.

Мне было интересно, может ли кто-нибудь помочь мне в том, как этого добиться, или предоставить образец кода.

Спасибо за любую помощь или советы.


dashing
person mpals    schedule 16.09.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете сделать это, установив атрибут в Coffescript вашего виджета, начав его с false, и привязать функцию переключения, используя data-event-click в вашем представлении. Это изменит значение вашего атрибута. Их вы помещаете то, что хотите показать и скрыть, в два контейнера и привязываете к ним этот атрибут, используя data-hideif='attributeName' для контейнера, который вы хотите скрыть при вызове события клика в вашем виджете, и используя data-showif='attributeName' для контейнера, который вы хотите показать при повышении событие щелчка.

Итак, ваш кофескрипт будет выглядеть примерно так:

class Dashing.ToggleableWidget extends Dashing.Widget
  toggleDetails: -> 
    @set('showDetails', !@showDetails)

# you could still use accessor with:
# @accessor 'toggleDetails',
#   get: -> @set('showDetails', !@showDetails)
#   cache: false 
# 
# ... but it is not necessary, and using a normal function will solve your problem

  ready: -> 
    @showDetails = false

И ваше представление станет чем-то вроде:

<div class="status-accounts" data-event-click="toggleDetails">
  <div class="summary" data-hideif="showDetails" data-bind="summary"></div>
  <div class="details" data-showif="showDetails">
    <div class="account" data-foreach-account='accounts' data-bind-title='account.status'>
      <span class="name" data-bind="account.account_name | append ' - '"></span>
      <span class="status" data-bind="account.status | truncate 3, ''"></span>
    </div>
  </div>
</div>

При этом, когда ваш виджет будет отображаться (или повторно отображаться после изменения данных), он покажет ваш контейнер сводки, и если вы щелкнете, он покажет контейнер с вашими данными.

person cefigueiredo    schedule 17.09.2014
comment
Большое спасибо за ваш ответ, он мне очень помог. У меня есть одна проблема и один вопрос, хотя. Я использовал более или менее точно тот код, который вы мне дали (без учетной записи), и первая страница не перерисовывается, когда я снова нажимаю на виджет. Похоже, что так и должно быть, поскольку showDetails снова должно быть ложным, когда виджет был дважды нажат. Также есть ли способ различать перетаскивание и щелчок, чтобы метод щелчка не активировался, когда виджет перетаскивается в другое место? - person mpals; 18.09.2014
comment
Хорошо, похоже, что функция переключения деталей срабатывает только один раз ... Почему это? - person mpals; 18.09.2014
comment
Я думаю, что неправильно понял поведение аксессора. Или, по крайней мере, его поведение по умолчанию, потому что у него есть кеш, который, когда вы связываете методы доступа с привязкой данных, предотвращает повторное выполнение каждый раз и выполняется один раз, пока некоторые из их переменных не изменятся (по крайней мере, когда вы вызываете эти атрибуты с помощью @get ). Этот кеш можно отключить, но в вашем случае было бы лучше реализовать функцию как обычную функцию. Я собираюсь отредактировать свой ответ для этого. - person cefigueiredo; 21.09.2014