使用帶有durandal模板的自定義JavaScript腳本文件

Question

我使用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(); 
    }) 
}) 

正如你所看到的，每個用'dropdown'類裝飾的元素都應該被捕獲。它不適用於durandal。我放置了一些警報框來檢查它。顯示警報「XX」，但從未顯示警報「YY」。

我搜索了一堆沒有成功的小時。

有什麼想法？

Answer 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> 

Answer 2

退房的生命週期事件塔T優能夠領略到了Durandal here

viewAttached可以幫助因爲當視圖和dom準備就緒時你可以使用它。