在将视图模型与 jquery Ui 结合使用时，无法在 HotTowel SPA 中将此 jquery-ui.js 功能手风琴用于 GUI

Question

以下代码在浏览器中运行良好。这给出了一些上下滑动 UI。

  <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Collapse content</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
  });
  </script>
</head>
<body>

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
  </div>
</div>


</body>
</html>

但是当我厌倦了在 Hottowel SPA 中使用此代码时无法使用任何人都可以告诉我如何使此功能在 HotTowel SPA 模板中工作。在这里，我试图结合 jquery-ui.js 和 viewmodel。

Answer 1

包括这些脚本

 <script src="~/Scripts/koui.js"></script> 
    <script src="~/Scripts/jquery-ui-1.11.4.js"></script>

在敲除绑定中使用 jqueryUi 函数

过滤器值

        </ul>
    </section>
    <div id="filter">
        <div class="mytbody">
            <section>
                <ul class="mytr" style="width: 100%;">
                    <li class=" mytd">IsActive</li>
                    <li class="mytd">
                        <select class="filters" data-bind="options: ['True', 'False'], value: searchName"></select></li>
                    <li class="mytd">
                        <button class="btn btn-info" data-bind="click: $root.search">Go</button></li>
                </ul>
                <!--Enter for accordion slide down-->
                <ul class="mytr" style="width: 100%;">
                    <li class=" mytd">Jobs Created before</li>
                    <li class="mytd">
                        <input class="filters" readonly="true" data-bind="value: dateTextBfr, jqueryui: { widget: 'datepicker', options: { showPeriod: true } }" type="datetime" /></li>
                    <li class="mytd">
                        <button class="btn btn-info" data-bind="click: searchDateBfr">Go</button></li>
                </ul>
                <!--Enter for accordion slide down-->
                <ul class=" mytr" style="width: 100%;">
                    <li class=" mytd">Jobs Created after</li>
                    <li class="mytd">
                        <input class="filters" readonly="true" data-bind="value: dateTextAfr, jqueryui: { widget: 'datepicker', options: { showPeriod: true } }" type="datetime" /></li>
                    <li class="mytd">
                        <button class="btn btn-info" data-bind="click: searchDateAftr">Go</button></li>
                </ul>
                <!--Enter for accordion slide down-->
            </section>


        </div>

    </div>
</div>

在将视图模型与 jquery Ui 结合使用时，无法在 HotTowel SPA 中将此 jquery-ui.js 功能手风琴用于 GUI

Unable to use this jquery-ui.js function accordion for GUI in HotTowel SPA whicle combining viewmodel with jquery Ui

jquery-ui

hottowel