如何將Fancybox與Durandal和TypeScript結合使用

我不再使用John Papa的Hot Towel模板進行原型設計和開發。而不是使用Javascript，我使用TypeScript，並出現一個問題。如何將Fancybox與Durandal和TypeScript結合使用

當用戶點擊SPA中的圖像時，我希望圖像彈出fancybox。但是，我無法實現這一點。我以爲我把我的fancybox的代碼放在激活函數中，因爲每次加載視圖時都會調用它（我可能在這裏是錯誤的）。

但我也發現與Fiddler de .js（ModelView）加載在.html之前，意味着viewmodel無法調整.html（我在這裏也可能是錯誤的）。

我會發布視圖和模型。

所有的JavaScript庫的加載都正確，因爲我可以告訴Chrome或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; 
}

來源

2013-03-15 Leroy Meijer

要連接的DOM，你將需要公開的「viewAttached」的方法。這是前三個事件當一個視圖是由該迪朗達爾將調用：

canActivate（查找真或假的返回值）
激活（如果返回承諾將不會加載的觀點，並會等待承諾解決）
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-16 00:06:19 RyanKeeter

是的，這確實的伎倆;）感謝;）的其他錯誤我是越來越是jQuery的崩潰，只是升級引導（只是谷歌的埃羅）到2.3.1和它的固定感謝@ryanKeeter – 2013-03-18 11:29:11

你需要什麼參考「定義」，它不適合我 – 2013-04-08 17:10:47

@ AD.Net你確切的問題是什麼？你還在使用DUrandalJS嗎？ – 2013-05-21 07:41:36

如何將Fancybox與Durandal和TypeScript結合使用

回答

相關問題