0 
<div data-bind="foreach: passengers">                       
<a href="#" data-bind='style: { color: isOwner  ? "orange" : "darkgreen" }, 
text: person_username, click: function() { $root.removePassenger($data, $parent); } '>


このようなテンプレートがあるとします。クリック関数は、isOwnerがtrueの場合にのみバインドする必要があります。これを行うための簡単で簡単な方法はありますか？完全なjqueryテンプレートを作成して何かを実行できると思いますが、より洗練されたソリューションを知りたいと思います。

ありがとう。

4

1 に答える 1

3

求めているのは、一部のプロパティが設定されている場合にのみクリックイベントを処理するアプリケーションロジックです。アプリケーションロジックはビューに属していません。ビューモデルに属しています。

確かに、あなたは次のようなことをすることができます：

click: function() { if ($data.isOwner) $root.removePassenger($data, $parent); }

しかし、繰り返しになりますが、これは関心の分離とデバッグの観点から嫌われているロジックをビューに配置し、HTMLを醜くします。

私はこのようにすることをお勧めします：

<div data-bind="foreach: passengers">                       
   <a href="#" data-bind='style: { color: isOwner  ? "orange" : "darkgreen" }, 
      text: person_username, click: function() { $root.removePassengerIfApplicable($data, $parent);"</a>
</div>

そしてあなたのJavaScript：

function removePassengerIfApplicable(passenger, parent) {
    if (passenger.isOwner) {
        removePassenger(passenger, parent);
    }
}

アップデート

isOwner = falseの場合、リンクを表示したくないことは投稿から明らかではありませんでした。更新されたコードは次のとおりです。

<div data-bind="foreach: passengers">  
   <div data-bind="if: isOwner">                     
      <a href="#" style="color: orange" 
      text: person_username, click: function() { $root.removePassenger($data, $parent); }"</a>
   </div>
   <div data-bind="if !isOwner()">
      <span style="color: darkgreen" data-bind="text: person_username"></span>
   </div>
</div>

上記のコードは、isOwnerの場合はリンクを示し、そうでない場合はプレーンテキストスパンを示しています。

于 2012-11-30T17:29:07.383 に答える