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 时才应绑定 click 函数。有没有简单/容易的方法来做到这一点？我猜我可以打破完整的 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 回答