1

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

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

但我还发现 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>

模型视图

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

1 回答 1

4

要连接 DOM，您需要公开“viewAttached”方法。以下是 Durandal 在组合视图时将调用的前三个事件：

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

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

公开上述函数如下所示：

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

return{
   canActivate: function(){ return true;},
   activate: function(){},
   viewAttached: function(){}
}
};
于 2013-03-16T00:06:19.623 回答