1

私は、ジョン・パパのホットタオルテンプレートを使ったプロトタイピングと開発で大忙しです。Javascript を使用する代わりに、TypeScript を使用していて、問題が発生しました。

ユーザーがSPAの画像をクリックすると、その画像がfancyboxで飛び出すようにします。しかし、これを実装することはできません。ビューがロードされるたびに呼び出されるので、fancybox のコードを de Activate 関数に入れると思いました (ここで間違っている可能性があります)。

しかし、Fiddler を使用して、de .js (ModelView) が .html の前にロードされることもわかりました。これは、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 が呼び出す最初の 3 つのイベントを次に示します。

  1. canActivate (true または false の戻り値を探します)
  2. activate (promise を返すとビューをロードせず、promise が解決するのを待ちます)
  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 に答える