2

Durandal テンプレートを使用して Visual Studio 2012 MVC4 プロジェクトに取り組んでいます。このテンプレートでは、shell.js ページが非常にシンプルなメニュー ソリューションを提供し、すべての要素が一番上に配置されています。個人的には違うものが必要です。その目的のために、サブメニューの表示/非表示を可能にする dropdown.js という名前の JavaScript ファイルがあります。標準プロジェクトではかなりうまく機能しますが、durandal テンプレートを使用して作業することはできませんでした。

ここに私が試すものがあります：

Index.chtml に dropdown.js スクリプトへの参照を追加しました。

<script src="~/Scripts/dropdown.js"></script>

次に、shell.html ページで、次のように使用したいと思います。

<li class="dropdown" data-role="dropdown">
    ...
    ...
</li>

以下は、dropdown.js の一部です。

$(function () {
    alert('XXXX');
    $('[data-role="dropdown"]').each(function () {
        alert('YYYY');
        $(this).Dropdown();
    })
})

ご覧のとおり、「ドロップダウン」クラスで装飾された各要素がキャッチされているはずです。デュランダルには効かない。それを確認するためにいくつかの警告ボックスを配置しました。アラート「XX」は表示されますが、アラート「YY」は表示されません。

私は何時間も検索しましたが、成功しませんでした。

何か案が？

4

2 に答える 2

3

ここでデュランダルのために利用できるライフサイクルイベントをチェックしてください

viewAttachedは、ビューとdomの準備ができたときに利用できるため役立つ場合があります。

于 2013-03-15T14:03:47.450 に答える
1

問題は、メニューがレンダリングされる前に dropdown.js 関数が実行され、そのため jquery セレクターがリスト項目をキャッチしないことだと思います。

あなたの最善の選択肢は、リスト項目をドロップダウンに変換するためのノックアウト バインディングを作成することだと思います。

バインディングは次のようになります。

ko.bindingHandlers.dropdown= {
    init: function (element, valueAccessor, allBindingsAccessor) {
        $(element).Dropdown();
    },
    update: function (element, valueAccessor) {
    }
};

そしてビューで：

<li class="dropdown" data-bind="dropdown : {}">
    ...
    ...
</li>
于 2013-03-15T08:58:02.250 に答える