1

在过去 10 年左右的时间里，我有点脱离了 Web 开发，我正在重新投入到 Web 开发中，我被我必须赶上的所有新技术所压倒，ASP.NET， MVC、jQuery、SPA、Knockout 等。我不知道关于 jQuery 的第二件事，而且我对 ASP.NET 的经验非常有限。我对 ASP.NET WebForms 有点熟悉，但 MVC（以及其他）对我来说是全新的。

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

现在我正在尝试与我们内部的 UI 框架（过去几年一直在没有我的情况下开发）集成。我决定尝试更新热毛巾模板中的详细信息页面以包含一些内容。我添加了一个简单<span>的，一切都很好。但是，如果我尝试添加我所理解的基于 jQuery-widget 的组件（？），我什么也得不到。即使对于通过 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 特性以及替代视图的内容如何不是作为整个页面交付，而是作为主页的更新内容有关。

进一步调查后编辑，我发现存在一个名为“detail”的视图模型，这可能与我发布的这个详细视图代码有关。这是来自视图模型的代码：

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
});
4

1 回答 1

1

脚本可能正在执行但找不到 div。要正确操作 div，请将您的 jquery 代码放入一个函数中，并使用 duranadal 2.0 的附加/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
  });
于 2013-11-04T00:15:25.257 回答