如何将Fancybox与Durandal en TypeScript结合使用 [英] How to use Fancybox in combination with Durandal en TypeScript

问题描述

我不再使用John Papa的Hot Towel模板来忙于进行原型设计和开发。
而不是使用Javascript，而是使用TypeScript并遇到了一个问题。

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.

当用户单击SPA中的图像时，我希望该图像用fancybox弹出。但是我绝对无法实现这一点。我以为我将fancybox的代码放在de Activate函数中，因为那是在每次加载视图时调用的（我在这里可能是错误的）。

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).

但是我也发现了提琴手在.html之前加载de .js（ModelView），这意味着viewmodel无法调整.html（在这里我也可能错了。）。

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).

我将发布视图和模型。

正如我在Chrome或Fiddler中所说的那样，所有javascript库均已正确加载。

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

查看

<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;
}

推荐答案

要连接DOM，您需要公开 viewAttached方法。这是组成视图时Durandal将调用的前三个事件：

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（外观s（返回值为true或false）


2. 激活（如果您返回承诺，则不会加载视图，并且将等待承诺解决）


3. viewAttached（在这里，您将视图和viewmodel绑定在一起，因此您可以在此处进行jquery和Fancybox的操作）。

这能回答您的问题吗？因为打字稿与它无关。

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(){}
}
};

这篇关于如何将Fancybox与Durandal en TypeScript结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！