How to use Fancybox in combination with Durandal en TypeScript

Question

I'm quitte busy prototyping and developing with the Hot Towel template from John Papa. Instead of using Javascript I'm using TypeScript and come a cross a problem.

When the user click on a image in the SPA I want the image to pop out with fancybox. But for no way I can get this implemented. I thought I put my code for fancybox in de Activate function since thats called each time the view is loaded (I could be wrong here).

But I also found out with Fiddler that de .js (the ModelView) is loaded before the .html meaning that the viewmodel can't adjust the .html (I could be wrong here also).

I will post the view and Model.

All javascript library's are loaded correctly as I can tell in Chrome or Fiddler.

View

<div>
    <h1>Details</h1>
    <label data-bind="click: vm.test">klik me</label>
    <a class="fancybox-thumb" rel="fancybox-thumb" href="" title="Porth Nanven (MarcElliott)">
        <img src="" alt="" />
    </a>
</div>

ModelVIew

/// <reference path="../durandal/durandal.d.ts" />
/// <reference path="../../Scripts/knockout.d.ts" />
/// <reference path="../../Scripts/fancybox.d.ts" />

import app = module('durandal/app');
import logger = module('services/logger');
import services = module('services/dataservice');

var dataservice;


export var vm = {
    newCustomer: ko.observable(""),
    customers: ko.observableArray(),
    test:test,
    includeArchived: ko.observable(false) //,
    //addItem: addItem,
   // edit: edit,
    //completeEdit: completeEdit,
   // removeItem: removeItem,
   // archiveCompletedItems: archiveCompletedItems,
   // purge: purge,
   // reset: reset
};
//start();

function test() {
    alert("dsd");
}

function start() {
    //initialize viewmodel

    //initialize fancybox
    function test() {
        $(".fancybox-thumb").fancybox({
            prevEffect: 'none',
            nextEffect: 'none',
            helper: {
                title: {
                    type: 'outside'
                },
                thumbs: {
                    width: 50,
                    height: 50
                }
            }
        });
    }


    $(document).ready(function () {
        test();
    });

    //vm.includeArchived.subscribe(get

    //dataservice = new services.Dataservice(); //create a new instance of the dataservice
    //logger.log("Collecting data", null, 'details', true);

}

export function activate() {


   $(".fancybox-thumb").fancybox({
        prevEffect: 'none',
        nextEffect: 'none',
        helper: {
            title: {
                type: 'outside'
            },
            thumbs: {
                width: 50,
                height: 50
            }
        }
    });


    logger.log('Details view activated', null, 'details', true);
    return true;
}

Answer 1

to wire up the DOM you will need to expose the "viewAttached" method. Here are the first three events that Durandal will call when a view is composed:

1. canActivate (looks for a return value of true or false)
2. activate (will not load the view if you return a promise, and will wait for the promise to resolve)
3. viewAttached (here, you are at the point where the view and the viewmodel are bound together, so you can do your jquery and Fancybox stuff here).

Does that answer your question? Because typescript has nothing to do with it.

exposing the above functions looks like this:

\\any viewmodel that implements the revealing module pattern
define(function(require)){

return{
   canActivate: function(){ return true;},
   activate: function(){},
   viewAttached: function(){}
}
};