Question

我正在退出繁忙的原型设计并使用John Papa的Hot Towel模板进行开发。而不是使用Javascript我正在使用TypeScript并遇到问题。

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

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

我将发布视图和模型。

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

查看

<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

连接DOM，你需要公开＆＃34; viewAttached＆＃34;方法。以下是Durandal在编写视图时将调用的前三个事件：

canActivate（查找返回值true或false）
activate（如果您返回承诺，将不会加载视图，并将等待承诺解决）
viewAttached（在这里，您处于视图和视图模型绑定在一起的位置，因此您可以在此处执行jquery和Fancybox内容。）

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

公开上述功能如下：

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

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

如何将Fancybox与Durandal和TypeScript结合使用

1 个答案: