<p data-bind="fadeVisible: displayMessage"> 尚、このメッセージは displayMessage プロパティが false になると自動的に消滅する。 </p> function ViewModel() { var self = this; self.displayMessage = ko.observable(true); } $(function() { var vm = new ViewModel(); ko.applyBindings(vm); vm.displayMessage(false); // これでメッセージがフェードアウト }; // jQuery の fadeIn() / fadeout() メソッドを使ってエレメントの 可視/不可視 を切り替える ko.bindingHandlers.fadeVisible = { init
![サンプルに惑わされるな!KnockoutでUIエフェクトを使う際のベター・プラクティス - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ef52b774139c3768cd34c79fabcd764f09d233d1/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgyJUI1JUUzJTgzJUIzJUUzJTgzJTk3JUUzJTgzJUFCJUUzJTgxJUFCJUU2JTgzJTkxJUUzJTgyJThGJUUzJTgxJTk1JUUzJTgyJThDJUUzJTgyJThCJUUzJTgxJUFBJUVGJUJDJTgxS25vY2tvdXQlRTMlODElQTdVSSVFMyU4MiVBOCVFMyU4MyU5NSVFMyU4MiVBNyVFMyU4MiVBRiVFMyU4MyU4OCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSU4NiVFOSU5QSU5QiVFMyU4MSVBRSVFMyU4MyU5OSVFMyU4MiVCRiVFMyU4MyVCQyVFMyU4MyVCQiVFMyU4MyU5NyVFMyU4MyVBOSVFMyU4MiVBRiVFMyU4MyU4NiVFMyU4MiVBMyVFMyU4MiVCOSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MTJhZTM2ZTEyZmZlYjlmMDk2YzJkM2I4ZDI3MDRhOWM%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc3Vrb2J1dG8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTM2YWJkOWQxODg2YWFkY2I3MzFkMTJlNGNlNDVmN2Y1%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D2c765c61d785750c7a0f9f41a691e4ea)