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

在此处查看您可以利用Durandal的生命周期事件

viewAttached 可能会有所帮助，因为您可以在 view 和 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 回答