Question

我已经在几个网页（例如fitbit）上看到了这一点，其中一个小部件被翻转以在点击时显示新信息。

我想知道是否有人可以就如何实现这一点或提供代码示例给我一些帮助。

感谢您提供任何帮助或提示。

Answer 1

你可以在你的小部件的Coffescript上设置一个属性，用false开始，并在你的视图上使用data-event-click绑定一个切换功能。这将切换属性的值。他们，你在你的小部件上引发点击事件并使用data-hideif='attributeName'时，在你要隐藏的容器上使用data-showif='attributeName'放置要显示和隐藏在两个容器上的内容并将其绑定在它们上提升点击事件时要显示的容器。

所以，你的coffescript会变成：

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>

这样，当您的窗口小部件被渲染（或在更改数据后重新渲染）时，它将显示您的摘要容器，如果您单击，它将显示您的详细信息容器。

如何在点击时翻转/切换Dashing小部件

1 个答案: