Created
February 11, 2014 06:56
-
-
Save sukobuto/8930371 to your computer and use it in GitHub Desktop.
サンプルに惑わされるな!KnockoutでUIエフェクトを使う際のベター・プラクティス ref: http://qiita.com/sukobuto/items/9fc4bdc3463f13bdc00c
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// jQuery の fadeIn() / fadeout() メソッドを使ってエレメントの 可視/不可視 を切り替える | |
ko.bindingHandlers.fadeVisible = { | |
init: function(element, valueAccessor) { | |
var value = valueAccessor(); | |
$(element).toggle(ko.unwrap(value)); | |
}, | |
update: function(element, valueAccessor) { | |
var value = valueAccessor(); | |
ko.unwrap(value) ? $(element).fadeIn() : $(element).fadeOut(); | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ko.bindingHandlers['class'] = { | |
update: function(element, valueAccessor) { | |
ko.bindingHandlers.css.update(element, valueAccessor); | |
if (jQuery) { // jQuery がロードされてたら、classChanged イベントを発火 | |
jQuery(element).trigger('classChanged', [ valueAccessor() ]); | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul data-bind="foreach: { | |
data: items, | |
afterAdd: effects.list.fadeIn, | |
beforeRemove: effects.list.fadeOut }"> | |
<li data-bind="text: $data"></li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.message { /* 通常は透明 & 非表示 */ | |
opacity: 0; | |
transition: opacity .3s | |
} | |
.message.shown { /* shown クラスがつくとフェードイン */ | |
opacity: 1; | |
} | |
/* 簡略化のためにベンダープレフィックスは記載していません */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul data-bind="foreach: { data: items, afterAdd: showItem, beforeRemove: hideItem }"> | |
<li data-bind="text: $data"></li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p class="message" data-bind="class: { shown: displayMessage }"> | |
尚、このメッセージは displayMessage プロパティが false になると自動的に消滅する。 | |
</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 古い IE へのポリフィルコード。 | |
// <!--[if lt IE 9]> <![endif]--> 等を使って処理するとよい | |
$(function() { | |
$('.message').on('classChanged', function(e, data) { | |
if (ko.unwrap(data.shown)) { | |
$(this).fadeIn(300); | |
} else { | |
$(this).fadeOut(300); | |
} | |
}; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function ViewModel() { | |
var self = this; | |
self.items = ko.observableArray([]); | |
} | |
$(function() { | |
var vm = new ViewModel(); | |
ko.applyBindings(vm); | |
vm.items.push("追加アイテム"); // アイテムがフワッと追加される | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function ViewModel() { | |
var self = this; | |
self.displayMessage = ko.observable(true); | |
} | |
$(function() { | |
var vm = new ViewModel(); | |
ko.applyBindings(vm); | |
vm.displayMessage(false); // これでメッセージがフェードアウト | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.effects = (function($) { | |
var root = {} | |
, list = root.list = {} | |
; | |
// View に定義することで | |
// ・エフェクトの内容にちなんだ名前をつけることができる | |
// ・別の UI 部品でも使いまわせる | |
// というメリットもあります | |
list.fadeIn = function(elm) { | |
$(elm).hide().fadeIn(); | |
}; | |
list.fadeOut = function(elm) { | |
$(elm).fadeOut(300, function() { $(elm).remove() }); | |
}; | |
return root; | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment