数据绑定= "click"函数不适用于"this"？

Question

当使用knocket.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

Knockout将2个参数传递给事件的函数处理程序（请参阅文档）。所以你可以这样做：data-bind="click: function(data,e){$(e.target).css('color','yellow')}"

Answer 2

正如@Matt Burland所提到的，实现这一点的"Knockout"方法是在视图模型中有一个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 Burland在评论中指出的那样，为了使其成为真正的MVVM并避免直接的DOM操作，您可以在单个对象（城市）上添加一个标志，以在选择或不选择时进行切换。我已经修改了你的代码笔以显示我所说的

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>