挖空数据绑定自定义组件

Question

我在淘汰赛中有一个自定义组件，按以下方式使用(我继承了这段代码(

 <div data-bind="template: {
                name: 'error-message', data: {
                    isModified: isUserNameValid,                        
                    isValid: function () { return !isUserNameValid(); }
                }, as: 'field'
            }">

我有点困惑以下代码的作用

 isValid: function () { return !isUserNameValid(); }

这与简单地指定有何不同

 isValid: !isUserNameValid()

Answer 1

这些结构是绝对相同的，并且对淘汰赛有效。所以你可以使用较短的。

请注意，最好避免在标记中编写复杂的函数。此类函数应移动到视图模型对象。

var model = { isUserNameValid: ko.observable() };
ko.applyBindings(model);
setTimeout(function() { model.isUserNameValid(true); }, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script type="text/html" id="error-message">
<div>Template content</div>
<div data-bind="text: isValid()"></div>
</script>
<div data-bind="template: {
                name: 'error-message', data: {
                    isModified: isUserNameValid,                        
                    isValid: function () { return !isUserNameValid(); }
                }, as: 'field'
            }">