ko.bindingHandlers.slideTemplate

an example

by mecab

HTML

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div class="container" data-bind="slideTemplate: { name: 'testTemplate', data: currentData, duration: 500 }">
</div>
<script type="text/html" id="testTemplate">
  <h1 data-bind="text: title"></h1>
  <p data-bind="text: content"></p>
  <button data-bind="click: switchData">Switch Data</button>
</script>

CSS

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  transition-timing-function: ease;
}

JavaScript

var data1 = {
  title: ko.observable("This is Data1"),
  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni\
si ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui\
 officia deserunt mollit anim id est laborum.",
  switchData: function() {
    viewModel.currentData(data2);
  }
};

var data2 = {
  title: ko.observable("This is Data2"),
  content: "吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。この書生の掌の裏でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗に眼が廻る。胸が悪くなる。到底助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。",
  switchData: function() {
    viewModel.currentData(data1);
  }
};

var viewModel = {
  currentData: ko.observable(data1)
};

ko.bindingHandlers.slideTemplate = {
    init: function(elem, valueAccessor, allBindings, viewModel, bindingContext) {
        return ko.bindingHandlers.template.init.apply(this, arguments);
    },
    update: function(elem, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = ko.unwrap(valueAccessor());
        var $elem = $(elem);
        var clone = $(elem).clone().insertBefore($elem);

        var duration = value.duration || 500;

        $elem.css('transition-property', "none")
            .css('left', "100%")
            .css('transition-duration', duration + "ms");
       ...