使用带有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准备就绪时你可以使用它。