防止下拉菜单改变淘汰赛

Question

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

在这个模板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/ 以获取实时示例

我对淘汰赛的超级新手 http://knockoutjs.com/documentation/value-binding.html ，它确实提到了添加属性 changeBubble: false，但这似乎并没有帮助。

问：我可以/如何防止选择更改有条件地发生（以便我可以在此行为上插入自定义验证）

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

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