data-bind="click" 功能不适用于“this”？答案

【问题标题】：data-bind="click" function not work with "this"?data-bind="click" 功能不适用于“this”？
【发布时间】：2015-11-05 21:59:21
【问题描述】：

我试图在使用 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

【问题讨论】：

数组中的对象拥有一个可观察属性然后使用style 绑定并让你的点击函数工作来设置该属性不是更有意义吗？那将是更多的MVVM。就像现在一样，this 并不是你想象的那样。
我对 MVVM knockoutjs 相当陌生。我的最终目标是单击 LI 元素并放大谷歌地图上的标记。用你刚才提到的方法可以做到吗？如果生病了，请调查一下。
您只是想突出显示“选定项目”吗？为此使用css 绑定。
在任何绑定中，$element 指的是当前元素。见knockoutjs.com/documentation/binding-context.html

标签： jquery knockout.js inline-functions

【解决方案1】：

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

【讨论】：

【解决方案2】：

正如@Matt Burland 提到的，“淘汰”的做法是在您的视图模型中拥有一个color 属性，该属性使用style 绑定绑定到一个元素。

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

但是，如果您确实需要一种方法来引用 click 绑定操作中的元素，则可以使用 event.target。

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

【讨论】：

【解决方案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>

【讨论】：