2013-03-06 10 views
6

私はここで最高になります何Knockoutを使用してクリックイベントを無効にするにはどうすればよいですか?

<a href='#' data-bind='click: clickActivateSpatialSearch' id='draw_polygon'> 
<a href='#' data-bind='click: clickActivateSpatialSearchBox' id='draw_box'> 

と呼ばれる2つのボタンが、ありますか? $(document).readyでjQueryを使用できますか?問題は、データバインドクリックが、押されたときに他のクリックイベントを無効にすることです。しかし、同じボタンを押すと、もう一度2番目のボタンを戻すことができます。

だから私はすべてのジッバーリッシュで言いたいことは、一度に1つのボタンしか有効にしたくないということです。これはノックアウトと一緒に共作することが可能ですか?そしてもしそうなら、私にどのように教えてください。 PS:ノックアウトサイトで有効にしていますが、私はそれを得ていません。どうすればそれを完全に稼働させるべきですか?

+0

あなたのビューモデル(の関連部分)を投稿してください。 – jensgram

答えて

1

あなたは開催されているボタンは、その後、観察をチェックする機能であることをクリックして変更押されたことを、観察を追加することができます。

<a href='#' data-bind='click: function() { 
    if(buttonClickedObservable() == 'polygon') 
    { 
     clickActivateSpatialSearch(); 
    }' id='draw_polygon'> 
<a href='#' data-bind='click: function() { 
    if(buttonClickedObservable() == 'box') 
    { 
     clickActivateSpatialSearchBox'(); 
    }' id='draw_box'> 

あなたはあなたがが、観察の設定方法を決定する必要があります。

3

knockoutjsは我々だけで、アクティブ両方のリンク初期では、この

のようなコードを持っているときに働く機能を有効にします。いずれかのリンクをクリックすると別のリンクが無効になります。リンクをもう一度クリックすると、もう一方のリンクが有効になります。

これはこれは、あなたが唯一のボタンが有効たい

は、その後、いくつかの条件が存在しなければならないノックアウトとの仕事を有効にするには、この有効で、これらの条件を適用する方法の答えは、あなたが...を頼む何の答えですされていませんバインディング、それはすべて解決された問題です。

HTML: -

<input type="text" data-bind="enable: linkTwo() != 'clicked',click: clickActivateSpatialSearch" id='draw_polygon'/> 
<input type="text" data-bind="enable: linkOne() != 'clicked',click: clickActivateSpatialSearchBox" id='draw_box'/> 

スクリプト: -

var self = this; 
self.linkOne = ko.observable(); 
self.linkTwo = ko.observable(); 

self.clickActivateSpatialSearch = function(){ 
    if(self.linkOne() != 'clicked'){ 
     self.linkOne('clicked'); 
    } 
    else{ 
    self.linkOne('notClicked'); 
    } 
// some code here 
}; 

self.clickActivateSpatialSearchBox= function(){ 
    if(self.linkTwo() != 'clicked'){ 
     self.linkTwo('clicked'); 
    } 
    else{ 
    self.linkTwo('notClicked'); 
    } 
// some code here 
}; 

注:有効にして、入力、テキストエリア、選択のために働くtag.Itアンカーのために動作しません結合無効に..

+0

イネーブル機能なしでは、 Paul Manzottiの答えも確実に働くでしょう。 – nav0611

+0

'data-bind = 'enable:linkTwo()!=' clicked''はまったく気に入らず、これらのバインディングを解析できませんでした。 – WeeklyDad

+0

そして私はviewModelでそれを正確に追加しましたが、サイトを開始すると即座にそれを解析しようとします – WeeklyDad

関連する問題