0

hottowel (Breeze 1.4.5、Durandal 2.0.1、Knockout 3.0.0、Bootstrap 3.0、jquery 2.0.3) を使用した SPA があり、クライアント ビューで ko.extenders を使用して検証しましたが、すべて完全に機能しますが、監視対象を拡張すると(ナビゲーション プロパティ) ko.extenders を使用すると、検証は機能しませんでしたが、エラー メッセージがビューに表示されませんでした。次のクラスがあります。

public class Animal
{
    public Animal()
    {
        Actions = new List<Action>();
    }

    public int Id { get; set; }        
    public string Name { get; set; }

    public virtual ICollection<Action> Actions { get; set; }
}

public class Action
{
    public int Id { get; set; }
    public int AnimalId { get; set; }
    [Required]
    public int ActionTypeId { get; set; }
    [Required]
    public string Name { get; set; }
    public string Description { get; set; }
}

景色：

<div data-bind="with: animal">
<input data-bind="value: name"/>
<div data-bind="foreach: actions">
    <div>
        <p data-bind="css: { errorMessageForm: name.hasError }">
            <input type="text" data-bind="value: name, valueUpdate: 'afterkeydown'" maxlength="128" />
            <span data-bind="visible: name.hasError, text: name.validationMessage"></span>
            <span data-bind="visible: name.hasError, text: 'Has Error'"></span>
            <span data-bind="visible: !name.hasError(), text: 'No Has Error'"></span>
        </p>
    </div>
    <div>
        <p data-bind="css: { errorMessageForm: description.hasError }">
            <input type="text" data-bind="value: description, valueUpdate: 'afterkeydown'" maxlength="128" />
            <span data-bind="visible: description.hasError, text: description.validationMessage"></span>
        </p>
    </div>
    <div>
        <p data-bind="css: { errorMessageForm: actionTypeId.hasError }">
            <select data-bind="options: $root.actionTypes, optionsText: 'name', optionsValue: 'id', value: actionTypeId, valueUpdate: 'change'"></select>
            <span data-bind="visible: actionTypeId.hasError, text: actionTypeId.validationMessage"></span>
        </p>
    </div>
</div>


<button data-bind="click: $root.addAction"><span>Add Action</span></button>

のコードaddAction:

addAction = function () {
            var action = datacontext.createAction();
            //add validators
            action.actionTypeId.extend({ intRequired: 'The action type is required' });
            action.name.extend({ required: 'The name is required' });
        }

のコードcreateAction:

function createAction() {
        var initialValues = {
            animalId: getCurrentAnimalId()
        };
        var action = manager.createEntity(entityNames.action, initialValues);

        return action;
    }

検証するエクステンダーは、「エクステンダーを使用してオブザーバブルを拡張する」のページと同じです。

のvalidationMessageプロパティactionTypeIdであり、name表示されませんでした。

validationMessageとの値を確認するためにブレークポイントを配置しhasError、viewmodel正しい値を持っていましたが、ビューには表示されませんでしたvalidationMessages。

検証の状態を確認するために、html ビューに次の行を追加した後:

<span data-bind="visible: name.hasError, text: 'Has Error'"></span>
<span data-bind="visible: !name.hasError(), text: 'No has Error'"></span>

私はSPAをテストし、後でボタンを使用して新しいアクションを追加しaddAction、ビューに2回複製された入力htmlコントロールを表示し、1つの入力に値を入力するnameと、検証メッセージが表示されますが、2番目の入力htmlコントロールでは1つの入力htmlコントロールにのみ表示されます(重複) 検証メッセージは表示されませんでした。

次の行により、「入力 html コントロール」が 2 回複製されました。

<span data-bind="visible: !name.hasError(), text: 'No has Error'"></span>

ビューは、breeze エンティティからのナビゲーション プロパティ アイテムの ko.extenders で検証メッセージを更新しません。

私はすべてをもう一度テストしましたが、エンティティの作成に Breeze を使用していません。単純なオブジェクトを使用しただけで、すべてが完全に機能します...しかし、Breeze を使用してエンティティを作成する必要があります。

4

0 に答える 0