data-bind =「click」函數不適用於「this」？

我試圖讓一些元素髮生在點擊使用時knockout.js和jquery。我可以改變不同元素的CSS像這樣的代碼體的背景，但沒有，如果我嘗試使用this.css(something)或$(this).css(something)data-bind =「click」函數不適用於「this」？

<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

來源

2015-11-05 Nicholas Tibbs

不可能將其用於對象更有意義陣列中有一個observable屬性，然後使用'style'綁定並讓您的點擊功能工作來設置該屬性。這將是更多的MVVM。就像現在一樣，「這不是你想象的。 –

即時通訊MVVM knockoutjs相當新。我的最終目標是點擊LI元素並放大Google地圖上的標記。用你剛纔提到的方法做到這一點是可能的嗎？如果這樣生病的話，請看一下。 –

你只是想突出顯示「選定的項目」？使用'css'綁定。 – CrimsonChris

淘汰賽傳遞在2個參數爲事件的功能處理（見documentation）。所以，你可以做這樣的事情：data-bind="click: function(data,e){$(e.target).css('color','yellow')}"

來源

2015-11-05 22:12:23 tabz100

正如@馬特Burland所提到的，這樣的「基因敲除」的方法是有一個color財產在被使用style綁定綁定到一個元素的視圖模型。

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

但如果你真的需要一種方式來引用click結合的行動裏面的元素，你會使用event.target。

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

來源

2015-11-05 22:12:54 CrimsonChris

像@馬特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>

來源

2015-11-05 22:44:43

data-bind =「click」函數不適用於「this」？

回答

相關問題