Функция data-bind = "click" не работает с "this"?

Question

Я пытаюсь заставить что-то произойти с элементом, когда его нажимают на использование knockout.js и jquery. Я могу изменить CSS на другой элемент, как фон тела с этим кодом, но не тогда, когда я пытаюсь использовать this.css(something) или $(this).css(something)

<h4>Places</h4> 
<ul data-bind="foreach: city"> 
    <li data-bind="click: function(){$(this).css('color','yellow')}"><span data-bind="text: city"></span>, <span data-bind="text: state"></span> 
    </li> 
</ul> 

function AppViewModel() { 
    var self = this; 

    self.city = ko.observableArray([ 
      { city: 'Richmond', state: 'VA' }, 
      { city: 'Dallas', state: 'TX' }, 
      { city: 'Los Angeles', state: 'CA' } 
    ]);  
} 

ko.applyBindings(new AppViewModel()); 

http://codepen.io/ntibbs/pen/PPdEVJ

Answer 1

Нокаут проходит в 2-х параметров обработчика функции для событий (См. documentation). Таким образом, вы можете сделать что-то вроде этого: data-bind="click: function(data,e){$(e.target).css('color','yellow')}"

Answer 2

Как уже упоминался Берланд @ Matt, то «Нокаут» способ сделать это будет иметь color свойства в вашей модели представления, что получает связанную с элементом с помощью style связывания.

<li data-bind="style: { color: color() }"> 

Но если вам действительно нужен способ, чтобы ссылаться на элемент внутри click связывания своего действия, вы будете использовать event.target.

<li data-bind="click: function(context, event){ $(event.target).css('color','yellow') }"> 

Answer 3

Как Берланд @ Matt отметил в комментарии для того, чтобы сделать его действительно MVVM и избежать прямого манипулирования DOM, вы можете добавить флаг на отдельные объекты (город) для переключения при выборе или нет. Я изменил свои codepen, чтобы показать, что я говорю

http://codepen.io/anon/pen/MaqqdL

function AppViewModel() { 
    var self = this; 

    self.city = ko.observableArray([ 
      { city: 'Richmond', state: 'VA'}, 
      { city: 'Dallas', state: 'TX' }, 
      { city: 'Los Angeles', state: 'CA'} 
    ]);  

    ko.utils.arrayForEach(self.city(),function(item){ 
     item.isSelected = ko.observable(false); 
    item.toggle=function(){ 
     item.isSelected(!item.isSelected()); 
    }; 
    }); 
} 

ko.applyBindings(new AppViewModel()); 

и размечать бы

<h4>Places</h4> 
<ul data-bind="foreach: city"> 
    <li data-bind="css:{selectedcity:isSelected},click: toggle"><span data-bind="text: city"></span>, <span data-bind="text: state"></span> 
    </li> 
</ul>