How to use Fancybox in combination with Durandal en TypeScript

Question

I am working on prototyping and developing the Hot Towel template by John Papa. Instead of using Javascript, I use TypeScript and run into a problem.

When a user clicks on an image in SPA, I want the image to come out using fancybox. But in no way can I achieve this. I thought I put my fancybox code in the Activate function, as it calls every time the view loads (I could be wrong here).

But I also learned from Fiddler that de.js (ModelView) is loaded up to .html, which means that the view model cannot configure .html (I could be wrong too).

I will publish the view and model.

The entire javascript library loads 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> 

species

 /// <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 connect the DOM, you will need to open the viewAttached method. Here are the first three events that Durandal will cause when composing a presentation:

• canActivate (looking for return value true or false)
• activate (will not load the view if you return the promise and wait for the promise to resolve)
• viewAttached (here you are at the point where the view and viewmodel are connected together, so you can do your jquery and Fancybox here).

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

The display of the above functions is as follows:

 \\any viewmodel that implements the revealing module pattern define(function(require)){ return{ canActivate: function(){ return true;}, activate: function(){}, viewAttached: function(){} } };