javascript - 纯粹与 UI 相关的 javascript 在 Durandal View 中放在哪里？

Question

我正在玩基于 Durandal 的 SPA，并且遵循他们拥有“ View ”和“ View 模型”的惯例，基本功能运行良好。 IE。使用 somepage.html 和 somepage.js。

但是，当添加更多交互式 UI 元素(例如可折叠的 Accordion 或信息弹出窗口)时，处理这些事件的 javascript 应该放在哪里？将它放在 somepage.js View 模型文件中“闻起来”不对 - 那是为了... View 模型!

从最佳实践的 Angular 来看，在我的 somepage.html 文件中有一个脚本 block 会更好吗？例如

<section>
    <!- html markup and data-binding goes here>
</section>

<script type="text/javascript">
    <!-- UI-only Javascript goes here>
</script>

或者有更好的方法吗？

Answer 1

我也一直在努力解决这个问题，我同意将与 View 相关的东西放在 viewModel 中是有问题的。我需要做你所说的事情的原因是 attach a delegated event handler - 这不能像建议的那样使用自定义绑定(bind)或小部件来完成。

我和一位同事提出的最佳解决方案是从 viewModel 传播 viewAttached 事件，并在“ View 文件”中监听该事件。

以名为“awesome”的 View 为例，我们使用如下命名约定:

• 查看模型 - viewmodels/awesome.js
• 查看 - views/awesome.html
• 查看文件 - views/awesome.html.js

这是我们正在做的事情的简化版本。

viewmodels/awesome.js:

define([
    "durandal/app",
    "durandal/system",

    // require the view file; note we don't need a reference to it,
    // we just need to make sure it's loaded
    "views/myView.html"
],

function (app, sys) {
    var viewModel = {
        // whatever
    };

    viewModel.viewAttached = function(view) {
        // Create a namespace for the event
        var eventNamespace = sys.getModuleId(viewModel)
            .replace("viewmodels", "")
            .replace("/", ".");

        // This will evaluate to 'awesome.viewAttached'
        var eventName = eventNamespace + ".viewAttached";

        // Trigger the event and pass the viewModel and the view
        app.trigger(eventName, viewModel, view);
    };

    return viewModel;
});

views/awesome.html.js:

define([
    "durandal/app"
],

function (app) {
    var module = {
        viewAttached: function(viewModel, view) {
            // do your thing! make sure any selectors you use use the view as the parent selector,
            // because you're not guaranteed that your view is in the DOM (only that it's attached
            // to its parent).
            var $submit = $("#submit", view);
        }
    };

    // wire-up
    app.on("awesome.viewAttached", module.viewAttached);

    // export
    return module;
});

希望对您有所帮助。