Question

我已经设法根据Niemeyer给出的答案创建了一个简单的向导。这很好用。我想添加验证。我已设法在字段名称上添加必需的验证。保留此空显示错误。但我无法成功的是以下几点：在当前步骤中验证模型，并根据是否存在错误启用或禁用下一步。如果启用或禁用下一个按钮太困难，那就没问题。当出现错误时，我也可以在没有禁用按钮的情况下生活。只要在出现错误时阻止用户进入下一步骤。

。我的观点如下：

 //model is retrieved from server model
 <script type="text/javascript">
     var serverViewModel = @Html.Raw(Json.Encode(Model));
 </script>


<h2>Test with wizard using Knockout.js</h2>
  <div data-bind="template: { name: 'currentTmpl', data: currentStep }"></div> 
<hr/>

<button data-bind="click: goPrevious, enable: canGoPrevious">Previous</button>
<button data-bind="click: goNext, enable: canGoNext">Next</button>

<script id="currentTmpl" type="text/html">
    <h2 data-bind="text: name"></h2>
    <div data-bind="template: { name: getTemplate, data: model }"></div> 
</script>

<script id="nameTmpl" type="text/html">
    <fieldset>
        <legend>Naamgegevens</legend>
        <p data-bind="css: { error: FirstName.hasError }">
            @Html.LabelFor(model => model.FirstName)
            @Html.TextBoxFor(model => model.FirstName, new { data_bind = "value: FirstName, valueUpdate: 'afterkeydown'"})
            <span data-bind='visible: FirstName.hasError, text: FirstName.validationMessage'> </span>
        </p>
        @Html.LabelFor(model => model.LastName)
        @Html.TextBoxFor(model => model.LastName, new { data_bind = "value: LastName" })
    </fieldset>
</script>

<script id="addressTmpl" type="text/html">
    <fieldset>
        <legend>Adresgegevens</legend>
        @Html.LabelFor(model => model.Address)
        @Html.TextBoxFor(model => model.Address, new { data_bind = "value: Address" })
        @Html.LabelFor(model => model.PostalCode)
        @Html.TextBoxFor(model => model.PostalCode, new { data_bind = "value: PostalCode" })
        @Html.LabelFor(model => model.City)
        @Html.TextBoxFor(model => model.City, new { data_bind = "value: City" })
    </fieldset>
</script>

<script id="confirmTmpl" type="text/html">
        <fieldset>
        <legend>Naamgegevens</legend>
        @Html.LabelFor(model => model.FirstName)
        <b><span data-bind="text:NameModel.FirstName"></span></b>
        <br/>
        @Html.LabelFor(model => model.LastName)
        <b><span data-bind="text:NameModel.LastName"></span></b>
    </fieldset>
    <fieldset>
        <legend>Adresgegevens</legend>
        @Html.LabelFor(model => model.Address)
        <b><span data-bind="text:AddressModel.Address"></span></b>
        <br/>
        @Html.LabelFor(model => model.PostalCode)
        <b><span data-bind="text:AddressModel.PostalCode"></span></b>
        <br/>
        @Html.LabelFor(model => model.City)
        <b><span data-bind="text:AddressModel.City"></span></b>           
    </fieldset>
    <button data-bind="click: confirm">Confirm</button>
</script>

<script type='text/javascript'>
    $(function() {
        if (typeof(ViewModel) != "undefined") {
            ko.applyBindings(new ViewModel(serverViewModel));
        } else {
            alert("Wizard not defined!");
        }
    });
</script>

knockout.js实现如下：

function Step(id, name, template, model) {
    var self = this;
    self.id = id;
    self.name = ko.observable(name);
    self.template = template;
    self.model = ko.observable(model);

    self.getTemplate = function() {
        return self.template;
    };
}

function ViewModel(model) {
    var self = this;

    self.nameModel = new NameModel(model);
    self.addressModel = new AddressModel(model);

    self.stepModels = ko.observableArray([
            new Step(1, "Step1", "nameTmpl", self.nameModel),
            new Step(2, "Step2", "addressTmpl", self.addressModel),
            new Step(3, "Confirmation", "confirmTmpl", {NameModel: self.nameModel, AddressModel:self.addressModel})]);

    self.currentStep = ko.observable(self.stepModels()[0]);

    self.currentIndex = ko.dependentObservable(function() {
        return self.stepModels.indexOf(self.currentStep());
    });

    self.getTemplate = function(data) {
        return self.currentStep().template();
    };

    self.canGoNext = ko.dependentObservable(function () {
        return self.currentIndex() < self.stepModels().length - 1;
    });

    self.goNext = function() {
        if (self.canGoNext()) {
            self.currentStep(self.stepModels()[self.currentIndex() + 1]);
        }
    };

    self.canGoPrevious = ko.dependentObservable(function() {
        return self.currentIndex() > 0;
    });

    self.goPrevious = function() {
        if (self.canGoPrevious()) {
            self.currentStep(self.stepModels()[self.currentIndex() - 1]);
        }
    };
}

NameModel = function (model) {

    var self = this;

    //Observables
    self.FirstName = ko.observable(model.FirstName).extend({ required: "Please enter a first name" });;
    self.LastName = ko.observable(model.LastName);

    return self;
};

AddressModel = function(model) {

    var self = this;

    //Observables
    self.Address = ko.observable(model.Address);
    self.PostalCode = ko.observable(model.PostalCode);
    self.City = ko.observable(model.City);

    return self;
};

我已经在字段Firstname中使用了所需验证的扩展器：

ko.extenders.required = 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;
};

Answer 1

这是一个棘手的问题，但我会为你提供一些解决方案......

如果您只是想阻止Next按钮继续使用无效的模型状态，那么我找到的最简单的解决方案是首先为每个用于显示验证的<span>标记添加一个类消息：

<span class="validationMessage" 
      data-bind='visible: FirstName.hasError, text: FirstName.validationMessage'>

（奇怪的格式以防止水平滚动）

接下来，在goNext函数中，更改代码以包括检查是否有任何验证消息可见，如下所示：

self.goNext = function() {
    if (
        (self.currentIndex() < self.stepModels().length - 1) 
        && 
        ($('.validationMessage:visible').length <= 0)
       ) 
    {
        self.currentStep(self.stepModels()[self.currentIndex() + 1]);
    }
};

现在，你可能会问“为什么不把这个功能放在canGoNext依赖的observable中？”，答案是调用那个函数不会像它那样工作。

由于canGoNext是dependentObservable，因此只要其所属的模型发生更改，就会计算其值。

但是，如果它的模型没有改变，canGoNext只返回最后计算的值，即模型没有改变，那么为什么要重新计算呢？

当仅检查是否还有更多步骤时，这并不重要，但当我尝试在该功能中包含验证时，这就发挥了作用。

为什么呢？好吧，例如，更改名字会更新它所属的NameModel，但在ViewModel中，self.nameModel未设置为可观察，因此尽管NameModel中有更改，self.nameModel仍然是一样的。因此，ViewModel没有改变，因此没有理由重新计算canGoNext。最终结果是canGoNext始终将表单视为有效，因为它始终检查self.nameModel，它永远不会更改。

令人困惑，我知道，所以让我向你扔一些代码...

这是ViewModel的开头，我最终得到了：

function ViewModel(model) {
    var self = this;

    self.nameModel = ko.observable(new NameModel(model));
    self.addressModel = ko.observable(new AddressModel(model));

    ...

正如我所提到的，模型需要被观察才能知道发生了什么。

现在对goNext和goPrevious方法的更改可以在不使这些模型可观察的情况下工作，但是可以获得您正在寻找的真实实时验证，其中按钮被禁用时表格无效，使模型可观察是必要的。

虽然我最终保留了canGoNext和canGoPrevious函数，但我没有使用它们进行验证。我稍后会解释一下。

首先，这是我添加到ViewModel进行验证的功能：

self.modelIsValid = ko.computed(function() {
    var isOK = true;
    var theCurrentIndex = self.currentIndex();
    switch(theCurrentIndex)
    {
        case 0:
            isOK = (!self.nameModel().FirstName.hasError()
                    && !self.nameModel().LastName.hasError());
            break;
        case 1:
            isOK = (!self.addressModel().Address.hasError()
                    && !self.addressModel().PostalCode.hasError()
                    && !self.addressModel().City.hasError());
            break;
        default:
            break;
    };
    return isOK;                
});

[是的，我知道......这个函数将ViewModel与NameModel和AddressModel类耦合在一起，甚至不仅仅是引用每个类的实例，但就目前而言，就是这样。]

以下是我在HTML中绑定此函数的方法：

<button data-bind="click: goPrevious, 
                   visible: canGoPrevious, 
                   enable: modelIsValid">Previous</button>
<button data-bind="click: goNext, 
                   visible: canGoNext, 
                   enable: modelIsValid">Next</button>

请注意，我更改了canGoNext和canGoPrevious，因此每个都绑定到其按钮的visible属性，并将modelIsValid函数绑定到enable属性

canGoNext和canGoPrevious函数就像您提供的一样 - 没有任何更改。

这些绑定更改的一个结果是“上一页”按钮在“名称”步骤中不可见，“下一步”按钮在“确认”步骤中不可见。

此外，当对所有数据属性及其关联的表单字段进行验证时，从任何字段中删除值会立即禁用Next和/或Previous按钮。

哇，这有很多要解释的！

我可能已经遗漏了一些东西，但这里是我用来使这个工作的小提琴的链接：http://jsfiddle.net/jimmym715/MK39r/

我确信在完成这项工作之前还有更多的工作要做，而且还有更多的障碍需要克服，但希望这些答案和解释有所帮助。

每一步都有Knockout.js向导验证

1 个答案: