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

Knockout将2个参数传递给事件的函数处理程序（参见documentation）。所以你可以这样做：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，您可以在单个对象（城市）上添加一个标记，以便在选择或不选择时进行切换。我修改了你的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>

数据绑定=＆＃34;单击＆＃34;功能不适用于＆＃34;这个＆＃34;？

3 个答案: