带有条件的淘汰赛事件绑定

Posted 2023-03-27

【中文标题】带有条件的淘汰赛事件绑定

【英文标题】：Knockout event binding with condition

【发布时间】：2018-08-04 21:36:03

【问题描述】：

我想将一些事件绑定到一个元素，使用淘汰赛“事件”绑定 但我希望所有列出的事件仅与特定案例绑定。

视图模型：

function vm()
var self = this;
self.isEditMode = ko.observable(false);//can be changed to true
self.events = ko.observable(
    down: function () 
        console.log("down")
    ,
    up: function () 
        console.log("up")
    ,
    hover: function () 
        console.log("hover")
    
);

和 html:

    <div style="border:1px solid red;width:50px;height:50px"
         data-bind="event:mousedown:events().down,mouseup:events().up,mouseover:events().hover:null"></div>
    <button data-bind="click:function()isEditMode(!isEditMode())">change </button>

我试过了：

 <div data-bind="event:isEditMode()?mousedown:events().down,mouseup:events().up,mouseover:events().hover:null"></div>

但它对我不起作用。

我认为最好的方法是使用自定义绑定处理程序，但我不知道如何。

非常感谢您的帮助！

【问题讨论】：

首先它在没有 isEditMode() 条件的情况下工作吗？

我刚刚检查了您的代码及其在 isEditMode 为 false 时的工作情况。您面临的问题是什么？

是的，它可以在没有 isEditMode() 条件的情况下工作。它甚至适用于 isEditMode() 条件，当它设置为 true 时，但如果设置为 false （通过单击我最近添加到上面的按钮） - 我得到一个 ko 错误。

你得到的错误是什么？

鼠标悬停div时发生

【参考方案1】：

您可以通过将一些逻辑移动到视图模型中来简化绑定

<div style="border:1px solid red;width:50px;height:50px"
     data-bind="event: 
        mousedown: down, 
        mouseup:up, 
        mouseover:hover " > </div>

并像这样查看模型

function vm() 
    var self = this;
    this.isEditMode = ko.observable(true);
    down = function() 
        if(this.isEditMode())
        
            console.log("down")
        
    ;
    up = function() 
       if(this.isEditMode())
        
            console.log("up")
        
    ;
    hover = function() 
        if(this.isEditMode())
        
            console.log("hover")
        
    ;


var viewModel = new vm();

ko.applyBindings(viewModel);

【讨论】：

那是我的第一步，但我更愿意阻止可重用的代码。我也想支持更多未来的活动，强迫他们具备这种条件。

【参考方案2】：

另一种选择是将条件作为两个单独的块放置在标记本身中，使用“if”绑定来确定显示和绑定哪些条件。

function vm() 
  var self = this;
  self.isEditMode = ko.observable(false); //can be changed to true
  self.events = ko.observable(
    down: function() 
      console.log("down");
    ,
    up: function() 
      console.log("up");
    ,
    hover: function() 
      console.log("hover");
    
  );


ko.applyBindings(new vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<!--ko if: isEditMode()-->
<div style="border:1px solid red;width:50px;height:50px" data-bind="event:
            mousedown:events().down,
            mouseup:events().up,
            mouseover:events().hover
        ">
  Edit Mode
</div>
<!--/ko-->
<!--ko if: !isEditMode()-->
<div style="border:1px solid red;width:50px;height:50px">
  Read Only
</div>
<!--/ko-->


<button data-bind="click:function()isEditMode(!isEditMode())">change </button>