Dashing.ioマーキーを使用したウィジェット

Question

iamはdashing.ioで作業しています。マーキーを使用してウィジェットを作成したいと考えています。私はcssアニメーションとhtml（http://jsfiddle.net/oLLzsyud/）でマーキーを行いました。それはそれで動作しますが、それはそれをそのようなウィジェットだ： SCCSを：

.widget-marquee { 
    background: #004894; 
    $color_celeste_approx: #cccccc; 

    .marquee { 
     width: 200px; 
     margin: auto; 
     padding: 2px; 
     overflow: hidden; 
     white-space: nowrap; 
     border: solid 1px $color_celeste_approx; 
     animation: marquee 10s linear infinite; 
     &:hover { 
      animation-play-state: paused; 
     } 
    } 

    @keyframes marquee { 
     100% { 
      text-indent: -100%; 
     } 
     0% { 
      text-indent: 100%; 
     } 
    } 
} 

HTML：威勢で

<div class="marquee"> 
    <span data-bind="stoer"></span> 
</div> 

が、それはこの and doesnt move

のように示されています私はコーヒースクリプトに触れなかった。これはウィジェット生成からのデフォルトです。

私は何が間違っているのか、なぜそれがダッシュで働いていないのかを見ていませんでした。たぶん誰かがここでなぜそれがdashingで動作していない知っているが、通常のページにCSSとhtmlで。

ありがとうございました。

Answer 1

私は自分でそれを手に入れました。私は、htmlファイルにmarqueereを置く：

<style> 
.marquee { 
    width: 1500px; 
    margin: auto; 
    padding: 2px; 
    overflow: hidden; 
    white-space: nowrap; 
    border: solid 1px #cccccc; 
    animation: marquee 10s linear infinite; 
} 

.marquee:hover { 
    animation-play-state: paused; 
} 

@keyframes marquee { 
    100% { 
    text-indent: -125%; 
    } 
    0% { 
    text-indent: 125%; 
    } 
} 
</style> 

<div class="marquee"> 
    <span data-bind="status"></span> 
</div> 

とデータはCoffeeScriptのファイルに読み込まれる：

class Dashing.Marquee extends Dashing.Widget 

    statusalt = [" "] 
    Array::unique = -> 
    output = {} 
    output[@[key]] = @[key] for key in [0...@length] 
    value for key, value of output 

    ready: -> 
    # This is fired when the widget is done being rendered 

    onData: (data) -> 
    # Handle incoming data 
    # You can access the html node of this widget with `@node` 
    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in. 

    statusneu = [ 
     @get('bsm') + " +++ ", 
     @get('stoer') + " +++ ", 
     @get('lzeit') + " +++ ", 
     @get('sla') + " +++ ", 
     @get('bkob') + " +++ ", 
     @get('major') + " +++ ", 
     @get('probl') + " +++ ", 
     @get('fulfil') + " +++ ", 
     @get('bm') + " +++ ", 
     @get('bk') + " +++ ", 
     @get('pm') + " +++ ", 
     @get('fianz') + " +++ ", 
    ] 
    statusfilter = statusneu.filter (x) -> x != "undefined +++ " 

    if statusfilter is statusalt 
     status = statusalt.toString().split(",").join(" ") 
    else 
     statusneu= statusfilter.concat statusalt 
     status = statusneu.unique().toString().split(",").join(" ") 
     statusalt = statusfilter 

    @set 'status', status.concat(@get('updatedAtMessage') + " +++ ") 

そのそうでないかもしれない最善の解決策が、それは私のダッシュボード上で動作します。 scssはちょうど青い背景をします。