Question

<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模板并完成一些工作，但我想知道更优雅的解决方案。

感谢。

Answer 1

您所要求的 - 仅在设置某个属性时处理点击事件 - 是应用程序逻辑。应用程序逻辑不属于视图。它属于视图模型。

当然，你可以做类似的事情：

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的链接，如果没有则显示纯文本范围。

有条件地绑定Knockoutjs中的函数

1 个答案: