使用带有 durandal 模板的自定义 javascript 脚本文件答案

【问题标题】：Using a custom javascript script file with durandal template使用带有 durandal 模板的自定义 javascript 脚本文件
【发布时间】：2013-03-03 20:09:39
【问题描述】：

我使用 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' 类装饰的元素都应该被捕获。它不适用于杜兰达尔。我放置了一些警告框来检查它。显示警报“XX”，但从未显示警报“YY”。

我搜索了好几个小时都没有成功。

有什么想法吗？

【问题讨论】：

标签： single-page-application durandal

【解决方案1】：

查看Durandal here 可以利用的生命周期事件

viewAttached 可能会有所帮助，因为您可以在视图和 dom 准备就绪时进行访问。

【讨论】：

我也使用viewAttached 来完成任务，但根据github 上的讨论，在走这条路之前应该首先考虑自定义绑定或Durandal 小部件。
这取决于......如果您只需要等待 DOM 准备好，viewAttached 就可以了。如果您需要更多，绑定是理想的。
不完全是我理解 Rob 的建议的方式，但我不得不承认，文档并没有 100% 清楚地说明何时使用哪个钩子才能根据 Durandal 的理念工作。
我让 Rob 将用例放入文档中......我认为这会澄清。我同意绑定处理程序更干净，但是如果您对视图模型中的 jQuery 代码感到满意，那么 viewAttached 也可以。我也更喜欢处理程序，因为它的价值。

【解决方案2】：

我认为问题在于，当在菜单呈现之前执行 dropdown.js 函数时，jquery 选择器不会捕获任何列表项。

我认为您最好的选择是进行淘汰绑定以转换下拉列表中的列表项。

绑定看起来像：

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

在视图中：

<li class="dropdown" data-bind="dropdown : {}">
    ...
    ...
</li>

【讨论】：