I am using Knockout a lot and often times I have to write scripts inside the data-bind attributes. Is there any validation tools that I can use on these markup files to validate the javascript inside data-bind
attributes? Would be nice if there is a grunt plugin.
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
回答1:
There probably isn't (a prominent) one, because it's not common to have a lot of complex logic inside your view. With MVVM-like approaches it works best if you keep the View rather plain, and write out logic in your ViewModel where you can unit test it.
So do not do this:
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>
Instead, do this:
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>
Because that would allow you to unit test the shouldShowItem
logic, e.g. with 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);
});
Bottom line, if you find yourself writing out lots of logic inside your view, you probably need to move some of it to your view models and make it testable.