验证属性内的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); 
}); 

底线，如果你发现自己写了很多逻辑视图里面，你可能需要一些它移动到您的视图模型，并使其可测试。