验证属性内的 javascript答案

【问题标题】：Validate javascript inside attributes验证属性内的 javascript
【发布时间】：2015-11-22 03:49:03
【问题描述】：

我经常使用 Knockout，而且我经常必须在数据绑定属性中编写脚本。我可以在这些标记文件上使用任何验证工具来验证 data-bind 属性中的 javascript 吗？如果有 grunt 插件就好了。

【问题讨论】：

验证什么的工具？这很模糊。
check modelview.js 一个快速的 MVVM 框架（灵感来自于淘汰赛），具有多功能和可扩展的类型转换/验证系统（ps 作者）
以上评论，如果我正确理解 MVVM 需要验证，另一方面，如果 grunt 需要验证（意味着其他类型的验证），请忽略之前的评论
您不必在数据绑定中编写/定义您的函数，只需从那里调用它们即可。这些功能应该在您的视图模型中完成。

标签： javascript knockout.js gruntjs knockout-validation

【解决方案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);
});

归根结底，如果您发现自己在视图中编写了大量逻辑，您可能需要将其中的一些移动到您的视图模型中并使其可测试。

【讨论】：