проверка нокаута - расширенный поиск пользовательского интерфейса

Question

Я создаю пользовательский интерфейс расширенного поиска, подобный веб-интерфейсу построителя запросов TFS. Использование нокаута для реализации на стороне клиента и все более или менее работающее, за исключением того, что окончательная проверка для того, чтобы сделать определенные требуемые элементы, в основном выбраны. Это сортирует работу, поскольку дает мне ошибку проверки, если я выбираю элемент, а затем отменю выбор элемента. Это нормально, но я хочу, чтобы форма была подтверждена при нажатии кнопки поиска.

Я уверен, что мне нужно использовать метод ko.validatedobservable, я точно не знаю, как именно. Во всяком случае, у меня есть скрипка, чтобы посмотреть: http://jsfiddle.net/sstolp/uXBSA/, если у кого есть время или желание помочь мне. Я был бы очень признателен.

Спасибо за ваше время.

scvm.SearchLine = function() { 
var self = this; 
self.selectedField = ko.observable().extend({ required: true }); 
self.selectedOperator = ko.observable().extend({ required: true }); 
self.firstdate = ko.observable(new Date()); 
self.lastdate = ko.observable(new Date()); 
self.thedate = ko.observable(new Date()); 

return self;}; 

scvm.Criteria = function() { 
var self = this, 
    lines = ko.observableArray([]), 

    // Put one line in by default 
    loadInitialData = function() { 
     lines.push(new scvm.SearchLine()); 
    }, 

    rowcount = ko.computed(function() { 
     return lines().length; 
    }), 

    // Operations 
    addLine = function() { 
     lines.push(new scvm.SearchLine()); 
    }, 

    removeLine = function (line) { 
     lines.remove(line); 
    }, 

    search = function() { 
     var data = $.map(lines(), function (line) { 
      return line.selectedField() ? { 
       selectedField: line.selectedField().searchfield, 
       selectedOperator: line.selectedOperator().name, 
      } : undefined 
     }); 
     alert("Send to server: " + JSON.stringify(data));    
    }, 

    clear = function() { 
     lines.removeAll(); 
    }; 

return { 
    lines: lines, 
    loadInitialData: loadInitialData, 
    rowcount: rowcount, 
    addLine: addLine, 
    removeLine: removeLine, 
    search: search, 
    clear: clear 
}; 
}(); 

Answer 1

Да, все ваши объекты Searchline должны быть обернуты в ko.validatedObservable. Также вы должны реализовать вычисляемое свойство, которое проверит isValid() для каждой строки критериев и вернет глобальный флаг достоверности.

<input type="button" 
     data-bind="enable: linesValid, click: search" 
     title="Clicking this button will run a search." 
     value="Search" /> 

Я изменил свою скрипку:

scvm.SearchLine = function() { 
    var self = this; 
    self.selectedField = ko.observable().extend({ required: true }); 
    self.selectedOperator = ko.observable().extend({ required: true }); 
    self.firstdate = ko.observable(new Date()); 
    self.lastdate = ko.observable(new Date()); 
    self.thedate = ko.observable(new Date()); 

    return ko.validatedObservable(self); 
}; 

scvm.Criteria = function() { 

    // ... 

    return { 
     lines: lines, 
     loadInitialData: loadInitialData, 
     rowcount: rowcount, 
     addLine: addLine, 
     removeLine: removeLine, 
     search: search, 
     clear: clear, 
     // new property that indicates validity of all lines 
     linesValid: ko.computed(function(){ 
      var items = lines(); 
      for (var i = 0, l = items.length; i < l; i++) 
       if (!items[i].isValid()) return false; 
      return true; 
     }) 
    }; 
}(); 

Это новое свойство может быть использовано в enable связывания вас кнопка «Поиск». Посмотрите: http://jsfiddle.net/ostgals/uXBSA/8/

---

Update:

Кроме того, мы должны немного изменить метод Criteria.search, так как наша линия массив содержит наблюдаемыми, а не объекты:

 //... 

     search = function() { 
      var data = $.map(lines(), function (line) { 
       line = ko.utils.unwrapObservable(line); 
       return line.selectedField() ? { 
        selectedField: line.selectedField().searchfield, 
        selectedOperator: line.selectedOperator().name, 
       } : undefined 
      }); 
      alert("Send to server: " + JSON.stringify(data));    
     }, 

     //...