0

TFSクエリビルダーのWebインターフェイスに似た高度な検索UIを構築しています。クライアント側の実装にノックアウトを使用し、特定の必須項目が基本的に選択されていることを確認するための最終検証を除いて、ほぼすべてが機能するようにします。アイテムを選択してからアイテムの選択を解除すると、検証エラーが発生する限り、これはある程度機能します。これで問題ありませんが、検索ボタンを押したときにフォームを検証してもらいたいのですが。

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

1 に答える 1

0

はい、すべてのSearchLineオブジェクトをにラップする必要がありますko.validatedObservable。isValid()また、各基準行をチェックしてグローバル妥当性フラグを返す計算プロパティを実装する必要があります。

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[検索]ボタンのバインドに使用できます。

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

私はあなたのフィドルを修正しました。見てください：http：//jsfiddle.net/ostgals/uXBSA/8/

アップデート：

また、ラインアレイにはオブジェクトではなくオブザーバブルが含まれているため、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));            
        },

        //...
于 2013-02-10T14:20:27.123 に答える