Validation 用于在主细节场景中进行验证的淘汰JS extender

Validation 用于在主细节场景中进行验证的淘汰JS extender,validation,knockout.js,extender,Validation,Knockout.js,Extender,“我的网页”将此viewmodel用于主详细场景: ko.extenders.myrequired = function (target, overrideMessage) { //add some sub-observables to our observable target.hasError = ko.observable(); target.validationMessage = ko.observable(); //define a functi

“我的网页”将此viewmodel用于主详细场景:

   ko.extenders.myrequired = function (target, overrideMessage) {
    //add some sub-observables to our observable
    target.hasError = ko.observable();
    target.validationMessage = ko.observable();

    //define a function to do validation
    function validate(newValue) {
        target.hasError(newValue ? false : true);
        target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
    }

    //initial validation
    validate(target());

    //validate whenever the value changes
    target.subscribe(validate);

    //return the original observable
    return target;
};

function PluginViewModel() {
    var self = this;

    self.name = ko.observable();
    self.code = ko.observable();
}

function item() {
    var self = this;

    self.id = ko.observable();
    self.listIndex = ko.observable();
    self.value = ko.observable();
    self.label = ko.observable();
    self.tabPos = ko.observable();
    self.plugins = ko.observableArray();
};

function TableViewModel() {
    var self = this;

    self.id = ko.observable();
    self.name = ko.observable();
    self.viewName = ko.observable().extend({ myrequired: "Please enter a view name" });
    self.columns = ko.observableArray();
    self.filteredColumns = ko.observableArray();
}

function SchemaViewModel() {
    var self = this;

    self.name = ko.observable();
    self.tables = ko.observableArray();

    // Table selected in left panel
    self.selectedTable = ko.observable();
    self.selectTable = function (p) {
        self.selectedTable(p);
    }
}
因此,当我单击selectedTable的“”时,knockoutjs绑定会显示其他字段,如输入文本以写入viewName字段

这是HTML代码:

<div>
    <ul class="list" data-bind="foreach: tables">
        <li><a data-bind="text: name, click: $parent.selectTable"></a></li>
    </ul>
</div>
<div>
    <div id="editor-content">
        <section id="viewNameSection">
            <div data-bind="with: selectedTable">
                <label>View name: </label>
                <input id="txtViewName" class="inputs" data-bind="value: viewName, valueUpdate: 'input'" placeholder="eg. MyView" />
                <span data-bind="visible: viewName.hasError, text: viewName.validationMessage"></span>
            </div>
        </section>
    </div>
</div>

  • 使用相同的代码复制/粘贴工作


    我真的不理解差异。

    我认为应该是这样

    //define a function to do validation
    function validate(newValue) {
        var isEmptyOrNull= typeof newValue === 'undefined' || !newvalue || newValue.length === 0;
        target.hasError(isEmptyOrNull);
        target.validationMessage( isEmptyOrNull ? 
                                    overrideMessage || "This field is required"
                                 :
                                    "");
    }
    
    作为补充说明,您可能需要考虑将validationMessage设置为计算值,而不是可观察值。

    我发现了错误。 “viewName”字段在填充表时不需要初始化。 那么,移除

    myTable.viewName("") 
    

    它可以工作。

    您是否在firebug中调试了代码?是否有任何错误?没有错误。我也在使用chrome的工具来跟踪ko事件,但仍然没有跟踪到错误。所以尝试通过在js代码中标记调试点来进行调试