Получение элемента по идентификатору в CoffeeScript

Question

Я пытаюсь создать HTML-виджет:

HTML:

<div> 
    <h1 class="title" data-bind="title">Title</h1> 

    <div> 
     <h1 id = "dc1" class="dc">DC1</h1> 
    </div> 
    <div> 
     <h1 id = "dc2" class="dc">DC2</h1> 
    </div> 

    <p class="updated-at" data-bind="updatedAtMessage"></p> 
</div> 

И мне нужно, чтобы иметь возможность установить цвет фона id="dc1" и id="dc2" элементов динамически в CoffeeScript. Я планирую сделать это, добавив класс с настройкой цвета фона:

SCSS:

&.up { 
    background-color: green; 
} 

&.down { 
    background-color: red; 
} 

.dc { 
    background-color: orange; 
    font-size: 30px; 
    float: left; 
    width: 50%; 
} 

До сих пор мне удалось установить весь фон виджета, но не дочерние элементы, упомянутые выше: Я использую:

CoffeeScript:

$(@node).removeClass('up down') 
$('#dc1').removeClass('up down') 
$('#dc2').removeClass('up down') 

$(@node).addClass('down') 
$('#dc1').addClass('down') 
$('#dc2').addClass('up') 

Обратите внимание, что в конце я добавлю классы в зависимости от некоторых данных, а не жесткую кодировку их в «вверх» или «вниз» в файле coffeescript.

Но ничего не происходит .. Я получаю правильный выбор элементов id="dc#"?

Если это помогает с контекстом я делаю это для Dashing

Answer 1

Ваш SCSS не имеет смысла, так что я думаю, что ваш отсутствующий ошибка от преобразования SCSS-на-CSS. в SCSS & является reference to the parent selector:

& будет заменен родительским селектором, как он появляется в CSS

поэтому имеет &.up на высшем уровне не имеет смысла и должен генерировать ошибку. Если мы фиксируем SCSS так что .up и .down применяются только к .dc:

.dc { 
    /* ... */ 
    &.up { 
     background-color: green; 
    } 
    &.down { 
     background-color: red; 
    } 
} 

то кажется, что все работает нормально.

Демо: http://jsfiddle.net/ambiguous/9y9uywm9/

Вы можете использовать Sassmeister (и другие аналогичные инструменты онлайн), чтобы увидеть, что думает SCSS вашего оригинального SCSS.