防止掉线改变淘汰赛

时间:2013-11-21 00:46:47

标签: javascript knockout.js

我正在尝试使用添加,删除和绑定创建一个网格模板,就像教程中的模板一样。

在这个模板http://jsfiddle.net/mouseoctopus/Qy736/中,我想做到这一点,以便每个下拉列表都有一个独特的价值 - 即。没有重复值 - 所以我试图在更改块中添加逻辑。

如果我正在使用jquery,为了处理事件,我可能会尝试绑定到更改并确定当前是否通过另一个下拉列表选择了该值,并在发生时阻止默认值。

使用淘汰赛这种行为是否可行?

我的事件正在解雇,但我无法阻止默认。

相关代码如下

HTML

   <td><select data-bind="options: $root.PhoneTypes, value: name, optionsText:'name',
            event: { change: $root.changeType}" ></select></td>

查看

  self.changeType = function(data, event){
      return false;
  };

查看实用示例的小提琴http://jsfiddle.net/mouseoctopus/Qy736/

我是超级新手,淘汰了<2天,所以我很可能不理解文档等等。在这个页面上 http://knockoutjs.com/documentation/value-binding.html,确实提到添加属性changeBubble:false,但这似乎没有帮助。

问:我可以/如何有条件地防止选择更改发生(这样我就可以对此行为插入自定义验证)

1 个答案:

答案 0 :(得分:1)

JSFiddle

无论如何,我不知道你想要什么来阻止这个事件。但是,您可以存储先前的值,然后在用户尝试选择以前选择的类型时更改回来:

function PhoneNumber(type, number, comment) {
    var self = this;

    self._type = type;    
    self.type = ko.observable(type);
    self.number = number;
    self.comment = comment;
}

function PhoneNumbersViewModel() {
    var self = this;

    self.subTitle = ko.observable("Call Me Maybe");

    self.PhoneTypes = [
        { name: "Fax" },
        { name: "Home" },
        { name: "Mobile" },
        { name: "Work" }
    ];    

    self.phoneNumbers = ko.observableArray([
        new PhoneNumber(self.PhoneTypes[0], "500-555-5555", "Phoney")
    ]);

    self.addPhoneNumber = function() {
        self.phoneNumbers.push(new PhoneNumber(self.PhoneTypes[0], "", ""));
    }

    self.removePhoneNumber = function(number) {
        self.phoneNumbers.remove(number);
    }

    self.clearSubtitle = function(){ this.subTitle(""); }

    self.changeType = function(data, event){
        if(self.phoneNumbers().some(function(number) {
            return number != data && number.type().name == data.type().name;
        })) {
            data.type(this._type);
        } else {
            this._type = data.type();
        }
    };
}

这并不能解决新项目被设置为可能已被选择的类型的问题......但这不是您所要求的。