2016-09-06 9 views
0

シナリオKnockout.js |観測可能な配列は、最後の要素が変更されたときにのみトリガーする

複数の入力フィールドがあります。フィールドは空であってはなりません。いずれかのフィールドが空の場合は、何らかのエラーメッセージが表示されます。


問題

私が扱っています問題は、私は、ビューのノックアウトのforeachを通じて、いくつかの入力を取り込む観察可能な配列を有することです。他の要素のいずれかが変更されたとき

すべてのロード、表示、及び適切に保存さは、しかし、(計算される)私の検証はときにのみ最後の要素観察アレイ変化ではなく呼ばれます。

私はThis SO Questionを見つけましたが、OPの問題は、彼/彼女は私の値が観測可能なものとしてラップされているので、私の問題ではない観測値としての価値がないということでした。


コード

Here's a fiddle

ここでは、コードです:

ビュー

<div data-bind="with: itemsModel"> 
    <label data-bind="text: validMessage">Totally valid</label> 
    <div data-bind="foreach: items"> 
    <div> 
     <label>Item: </label> 
     <input type="text " data-bind="value: name " /> 
    </div> 
    </div> 
</div> 

更新する計算された必要性は少しトリッキーなときにJS

function ItemModel(item) { 
    self = this; 
    self.item = item; 

    self.name = ko.observable(item.name); 

    self.isValid = ko.computed(function() { 
    return self.name() && self.name().length <= 256; 
    }); 
} 

function ItemsModel(itemsModel) { 
    var self = this; 
    self.itemsModel = itemsModel; 

    self.items = ko.observableArray([ 
    new ItemModel(itemsModel.items[0]), 
    new ItemModel(itemsModel.items[1]), 
    new ItemModel(itemsModel.items[2]) 
    ]); 

    // This is only getting called when the last element in self.items changes 
    self.isValid = ko.computed(function() { 
    var isValid = true; 

    for (i = 0; i < 3; i++) { 
     isValid = isValid && self.items()[i].isValid(); 
    } 

    return isValid; 
    }); 

    self.validMessage = ko.computed(function() { 
    if (self.isValid()) { 
     return "Totally Valid"; 
    } 

    return "Totally NOT Valid"; 
    }); 
} 

function ViewModel(data) { 
    var self = this; 
    self.data = data; 

    self.itemsModel = ko.observable(new ItemsModel(data.itemsModel)); 
} 

var modelData = { 
    itemsModel: { 
    items: [{ 
     name: "Item One" 
    }, { 
     name: "Item Two" 
    }, { 
     name: "Item Three" 
    }] 
    } 
}; 

ko.applyBindings(new ViewModel(modelData)); 

答えて

2

最初にselfを宣言していないので、グローバルです。

function ItemModel(item) { 
    self = this; 

が、これは私の問題の原因ではないですが、これは非常に有効なポイントです

function ItemModel(item) { 
    var self = this; 
+0

OMG ...あなたは天才です!私はそれを逃したとは信じられないが、私はそれがあまりにも多くのノックアウトhahaを見てからだと思う。私があなたにクッキーを与えることができれば、私はしますが、私は受け入れられた答えがしなければならないと思います。 –

1

ノックアウトの方法は、少なくとも一度は彼らが登録取得するために、すべての観測可能な実行に必要な、決定します。

このようなものを試してみてください。

self.isValid = ko.computed(function() { 
    var isValid = true; 

    for (i = 0; i < 3; i++) { 
     //if isValid is false second part will not executed 
     //isValid = isValid && self.items()[i].isValid(); 

     isValid = self.items()[i].isValid() && idValid; 
    } 

    return isValid; 
    }); 

は、私がここに似たようなケース

https://stackoverflow.com/a/38131131/2233835はそれが役に立てば幸いを持っていると思います!

+0

でなければなりません。私はあなたに良い点を作るためのアップヴォートを与えます。 –

関連する問題