jQuery UI与HotTowel的结合

Question

在过去的十年里，我已经有点脱离了网络开发，我被所有我必须追赶的新技术所淹没，ASP.NET，MVC，jQuery，SPA，Knockout等等。我不知道关于jQuery的第二件事，我对ASP.NET的经验是非常有限的。我对ASP.NET WebForms有点熟悉，但是MVC (以及其他的)对我来说是全新的。

在看到了有多少技术，而且不知道在我的新项目中应该探索哪条路线之后，我发现热毛巾似乎是一个模板，它将所有最新的东西整合到一个很好的包中，所以我决定获得热毛巾模板，并使用它启动一个ASP.NET MVC4 SPA项目。

现在，我正在尝试集成我们的内部UI框架(在过去几年中，它一直在没有我的情况下开发)。我决定尝试更新热毛巾模板中的详细信息页面，以获得一些内容。我添加了一个简单的<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的性质，这并不奇怪，但我应该做些什么呢？)而且检查器似乎完全无用(无法通过启动屏幕)。

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

编辑一些更多的细节:当我将jQuery内容移到SPA的主页时，它工作得很好，但是当我将它放在Details“页面”上时，它就不工作了。我怀疑这与这个应用程序的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
});

Answer 1

脚本可能正在执行，但找不到div。要纠正操纵div，将jquery代码放入函数中，并使用附加/组合回调(duranadal2.0)或viewAttached回调(durandal1.x)触发该函数。

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