Javascript 将jQueryUI与HotTower相结合

在过去10年左右的时间里，我已经有点脱离了web开发，现在我又回到了web开发领域。我被所有我必须赶上的新技术所淹没，ASP.NET、MVC、jQuery、SPA、Knockout等等。我对jQuery一无所知，我对ASP.NET的经验非常有限。我对ASP.NETWebForms有点熟悉，但MVC（以及其他）对我来说是全新的

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

现在，我正在尝试与我们的内部UI框架集成（在过去几年中，在没有我的情况下开发了该框架）。我决定尝试更新热毛巾模板中的详细信息页面以获得一些内容。我添加了一个简单的

，一切都很好。但如果我试图添加我理解为基于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>

---

脚本可能正在执行，但找不到div。若要更正操纵div，请将jquery代码放入函数中，并使用duranadal 2.0的附加/合成完成回调或durandal 1.x的viewAttached回调触发该函数

1.x链接-

2.0链接-

---

脚本可能正在执行，但找不到div。若要更正操纵div，请将jquery代码放入函数中，并使用duranadal 2.0的附加/合成完成回调或durandal 1.x的viewAttached回调触发该函数

1.x链接-

2.0链接-

---

---

我对Howtherb一无所知。。但是如果您尝试添加

$（document）.ready（函数（）{alert（'test'）；}）到页面底部，就在结尾标签的上方。您收到警报了吗？不，当SPA加载或切换到详细信息视图时，我没有收到警报。我不清楚$（document.ready）在SPA中是什么意思，在SPA中，整个应用程序生命周期只有一个文档。顺便说一句，我没有
标签，因为详细信息页面只是整个页面的一部分。这就是我尝试添加它的地方，而不是在主页上
标记所在的地方。嗯，在我看来，你的jQuery文件不能加载，但我对HotToWaloky一无所知。从那里运行你的原始jQuery，看看它是否有效。在主页上，你可以看到它正在导入
jQuery.js
文件等。。e、 g.
我相信您需要将jQuery导入到使用它的每个页面中。我不知道如何。。但是如果您尝试添加
$（document）.ready（函数（）{alert（'test'）；}）到页面底部，就在结尾标签的上方。您收到警报了吗？不，当SPA加载或切换到详细信息视图时，我没有收到警报。我不清楚$（document.ready）在SPA中是什么意思，在SPA中，整个应用程序生命周期只有一个文档。顺便说一句，我没有
标签，因为详细信息页面只是整个页面的一部分。这就是我尝试添加它的地方，而不是在主页上
标记所在的地方。嗯，在我看来，你的jQuery文件不能加载，但我对HotToWaloky一无所知。从那里运行你的原始jQuery，看看它是否有效。在主页上，你可以看到它正在导入
jQuery.js
文件等。。e、 g.
我相信您需要将jQuery导入到使用它的每个页面中。detailViewModel与代码的其余部分有何关联/连接？在您的示例中，它似乎是一个局部变量。您可以发布详细视图模型的代码吗？根据您的详细视图模型是breeze实体还是您自己的模块，这些处理程序将使用不同的技术添加。我认为我发布的代码完全是我的详细视图模型，直接从HotTower模板添加了几行代码。但由于对所有这些新技术都非常陌生，我不清楚视图模型是什么。您有权访问HotTower模板吗？我的项目基本上是一个普通的香草热毛巾MVC4项目，现在几乎没有任何改动。我建议你在。他们使用plan HTML和javascript，因此没有ASP.NET MVC或DB等。学习Durandal功能更好。我认为我的问题比dFiddle的示例代码要基本得多，它将帮助我理解：在基于HotTower的应用程序中提供的详细信息模板/文件中包含基于jQuery UI的代码有效吗？若否，原因为何？这是因为我需要了解Durandal或KnockoutJS语法？detailViewModel如何与代码的其余部分关联/连接？在您的示例中，它似乎是一个局部变量。您可以发布详细视图模型的代码吗？根据您的详细视图模型是breeze实体还是您自己的模块，这些处理程序将使用不同的技术添加。我认为我发布的代码完全是我的详细视图模型，直接从HotTower模板添加了几行代码。但由于对所有这些新技术都非常陌生，我不清楚视图模型是什么。您有权访问HotTower模板吗？我的项目基本上是一个普通的香草热毛巾MVC4项目，现在几乎没有任何改动。我建议你在。他们使用plan HTML和javascript，因此没有ASP.NET MVC或DB等。学习Durandal功能更好。我认为我的问题比dFiddle的示例代码要基本得多，它将帮助我理解：在基于HotTower的应用程序中提供的详细信息模板/文件中包含基于jQuery UI的代码有效吗？若否，原因为何？这是因为我需要了解Durandal或KnockoutJS语法？
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
});

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