驗證屬性內的JavaScript

Question

我使用Knockout很多，而且經常需要在數據綁定屬性中編寫腳本。是否有任何驗證工具可以用於這些標記文件以驗證data-bind屬性中的JavaScript？如果有一個咕嚕的插件會很好。

Answer 1

可能沒有（顯着的）一個，因爲在視圖中有很多複雜的邏輯並不常見。使用類似MVVM的方法，如果您保持View非常簡單，並且在您的ViewModel中可以單元測試它的邏輯，那麼它效果最好。

所以不要不做到這一點：

var ViewModel = function() { 
 
    var self = this; 
 
    
 
    self.isCurrent = ko.observable(false); 
 
    self.item = ko.observable({ id: 42 }); 
 
} 
 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<!-- Don't do this! --> 
 
<div data-bind="visible: !isCurrent() && !!item()"> 
 
    Showing something! 
 
</div>

相反，做這：

var ViewModel = function() { 
 
    var self = this; 
 
    
 
    self.isCurrent = ko.observable(false); 
 
    self.item = ko.observable({ id: 42 }); 
 
    
 
    self.shouldShowItem = ko.computed(function() { 
 
    return !self.isCurrent() && !!self.item(); 
 
    }); 
 
} 
 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<!-- Don't do this! --> 
 
<div data-bind="visible: shouldShowItem"> 
 
    Showing something! 
 
</div>

因爲這可以讓你單元測試shouldShowItem邏輯，例如，與QUnit：

QUnit.test("shouldShowItem is false if not isCurrent and item not set", function(assert) { 
    var vm = new ViewModel(); 
    vm.isCurrent(false); 
    vm.item(null); 
    assert.strictEqual(vm.shouldShowItem(), false); 
}); 

底線，如果你發現自己寫了很多邏輯視圖裏面，你可能需要一些它移動到您的視圖模型，並使其可測試。