I am making a custom widget in Shopify Dashing with the following code:
<div class="main">
<div id="bar">
<a href="Info" data-event-click="toggleDetails">Info</a>
</div>
<div id="summary" data-bind="summary"></div>
<div id="info" data-bind="info"></div>
<h2 data-bind="more"></h3>
</div>
When the "Info" tag is clicked it is supposed to toggle the views shown in the widget. This works fine the first time it is clicked and the function toggleDetails is called as expected. When it is clicked a second or third time however nothing happens, the function is never called.
Why is this? I really don't understand.
This is my coffescript class:
1 class Dashing.Toggle extends Dashing.Widget
2
3 ready: ->
4 # This is fired when the widget is done being rendered
5 #@showDetails = false
6 @showSummary = true
7 @initiateView()
8
9 onData: (data) ->
10 # Handle incoming data
11 # You can access the html node of this widget with `@node`
12 # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
13
14
15 @accessor 'toggleDetails', ->
16 @switchView()
17 console.log "toggling 1"
18
19 initiateView: ->
20 @summaryView().show()
21 @infoView().hide()
22
23 switchView: ->
24 console.log "Switching"
25 if @showSummary
26 @summaryView().fadeOut @animationLength()
27 @infoView().fadeIn @animationLength()
28 @showSummary = false
29 else
30 @infoView().fadeOut @animationLength()
31 @summaryView().fadeIn @animationLength()
32 @showSummary = true
33
34 summaryView: ->
35 console.log "getting summary view"
36 $(@node).find("#summary")
37
38 infoView: ->
39 console.log "getting info view"
40 $(@node).find("#info")
41
42 animationLength: ->
43 1000
Ok I just solved it myself :P I still don't know why but changing form calling the @accessor method toggleDetails to switchView worked wonders. Does anyone know why?