1

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

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

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

4

1 回答 1

2

你可以在你的小部件的 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>

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

于 2014-09-17T03:34:59.573 回答