Question

我试图在淘汰赛中切换图像但失败了，我搜索了很多但无法找到错误。

场景是我正在调用一个函数，在该函数内部，我将图像切换为true或false。你可以参考jsbin link

HTML

Nullable<type>

这是javascript

<img class="flipButton"  data-bind="visible: !OpenWidgetObj.flipCard, click: function(){ OpenWidgetObj.flipProductCard();}, attr:{ src:'img/flipArrowRight.png' }" />
                <img class="flipButton"  data-bind="visible: OpenWidgetObj.flipCard, click: function(){ OpenWidgetObj.flipProductCard();}, attr:{ src:'img/flipArrowLeft.png' }" />

Answer 1

您应该在代码中更改一些内容：

您正在更改不存在的属性CardFlip的值。它应该是flipCard。（我想这是一个错字）
不建议您从代码中调用函数的方式。你应该简单地通过名字来称呼它。只有在需要指定不同的参数或类似的东西时才需要Yous语法。即使展示，你也可以将其移动到视图模型中的一个函数，只需按名称调用它
在你的绑定中，你必须直接引用可观察的成员，即flipCard而不是OpenWidgetObj.flipCard
如果你需要否定一个属性值，你必须对它进行评估，即：!flipCard不起作用，但!flipCard()会这样做。
您不需要使用knockout指定src属性，因为您并未将其绑定到任何视图模型属性。

因此，HTML应如下所示：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <img class="flipButton"  
    data-bind="visible: !flipCard(), click: flipProductCard"
    src="http://lorempixel.com/60/60/abstract/6/" />
  <img class="flipButton"  
    data-bind="visible: flipCard, click: flipProductCard"
    src="http://lorempixel.com/60/60/abstract/5/" />
</body>
</html>

和JS一样，

var OpenWidget = function(){
  var self = this;
  self.flipCard= ko.observable(false);
  self.flipProductCard = function() {
    self.flipCard(!self.flipCard());
  };
};
OpenWidgetObj = new OpenWidget();
ko.applyBindings(OpenWidgetObj);

您可以在this jsbin中看到它。

Answer 2

您应该尝试这个简化版本：

<img class="flipButton" data-bind="click: ToggleCard, attr:{ src: CardType === 'right' ? 'img/flipArrowRight.png' : 'img/flipArrowLeft.png'}" />

OpenWidget=function(){
    var self = this;
    self.CardType = ko.observable("right");

    self.ToggleCard = function() {
        self.CardType(self.CardType() === 'left' ? 'right' : 'left'); 
    }
};
OpenWidgetObj = new OpenWidget();
ko.applyBindings(OpenWidgetObj);

在knockoutjs中切换图像

2 个答案: