javascript - 结合 jQuery UI 和 HotTowel

Question

在过去 10 年左右的时间里，我重新回到了 Web 开发领域，我对所有必须 catch 的新技术 ASP 感到不知所措。 .NET、MVC、jQuery、SPA、Knockout 等。我不知道关于 jQuery 的第二件事，而且我对 ASP.NET 的经验非常有限。我对 ASP.NET WebForms 有一点熟悉，但 MVC(以及其他)对我来说完全陌生。

在看到有多少技术，并且不知道在我的新项目中探索哪条路线之后，我发现 Hot Towel 似乎是一个模板，它将所有最新的东西组合到一个漂亮的包中，所以我决定获取Hot Towel 模板并用它启动 ASP.NET MVC4 SPA 项目。

现在我正在尝试与我们内部的 UI 框架集成(过去几年该框架一直在没有我参与的情况下开发)。我决定尝试更新 Hot Towel 模板中的“详细信息”页面以包含一些内容。我添加了一个简单的<span> ，一切都很好。但是，如果我尝试添加我所理解的基于 jQuery 小部件的组件(？)，我什么也得不到。即使对于通过 jQuery 添加内容的最简单的测试，我也一无所获:

<section>
    <h2 class="page-title" data-bind="text: title"></h2>
    <span>Test this</span>
    <div id="testDiv"></div>
    <script type="text/javascript">
       $("#testDiv").append("Testing");
    </script>
</section>

我看到 span ，但不是修改后的div 。而且我在源代码(“查看源代码”)或 IE9 控制台中看不到任何此类内容(考虑到 SPA 的性质，这并不奇怪，但我该怎么办？)。而且 Visual Studio Page Inspector 似乎完全没用(无法通过启动屏幕)。

在 HotTowel/jQuery/MVC/SPA/KockoutJS/Breeze/Durandal 模型下向 UI 添加元素的正确方法是什么？所有这些新框架都让我发疯。

编辑更多详细信息:当我将 jQuery 内容移动到 SPA 的主页时，它可以正常工作，但是当我将其放在详细信息“页面”上时，它就不起作用了。我怀疑这与该应用程序的 SPA 性质以及替代 View 的内容不是作为整个页面而是作为主页的更新内容提供的方式有关。

编辑经过进一步调查，我发现存在一个名为“detail”的 View 模型，它可能与我发布的这个详细 View 代码有关。这是 View 模型中的代码:

define(['services/logger'], function (logger) {
    var title = 'Details';
    var vm = {
        activate: activate,
        title: title
    };

    return vm;

    //#region Internal Methods
    function activate() {
        logger.log(title + ' View Activated', null, title, true);
        return true;
    }
    //#endregion
});

Answer 1

脚本可能正在执行，但找不到 div。要正确操作 div，请将 jquery 代码放入一个函数中，并使用 duranadal 2.0 的 Attached/compositionComplete 回调或 durandal 1.x 的 viewAttached 回调触发该函数

1.x 链接 - https://github.com/BlueSpire/Durandal/blob/master/docs/1.2/Composition.html.md#view-attached

2.0 链接 - http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks/

  // in your detail view model, if using durandal 1.x
  define(['services/logger'], function (logger) {
    var title = 'Details';
    var vm = {
        activate: activate,
        title: title,
        viewAttached : function(view){
                      // view is the root element of your detail view and is passed in 
                      // by durandal
                       $(view).append("Testing");
                     }
    };

    return vm;

    //#region Internal Methods
    function activate() {
        logger.log(title + ' View Activated', null, title, true);
        return true;
    }
    //#endregion
  });

  // in your detail view model, if using durandal 2.0, you have two options
  define(['services/logger'], function (logger) {
    var title = 'Details';
    var vm = {
        activate: activate,
        title: title,
        attached : function(view, parent){
                       // view is the root element of your detail view
                       // and is passed in by durandal
                       $(view).append("Testing first method");
                     },
        compositionComplete: function(view, parent){
                       // view is the root element of your detail view
                       // and is passed in by durandal
                       $(view).append("Testing second method");
                     }
    };

    return vm;

    //#region Internal Methods
    function activate() {
        logger.log(title + ' View Activated', null, title, true);
        return true;
    }
    //#endregion
  });