敲除事件与条件结合

Question

我想使用敲除"事件"绑定将某些事件绑定到元素但是我希望所有列出的事件仅与特定情况约束。

ViewModel：

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>

但对我不起作用。

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

非常感谢您的帮助！

Answer 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);

Answer 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>