javascript - 如何使用 KnockoutJS 插入 HTML 组件

Question

我有一个 HTML 侧边栏菜单：

资产/部分/menu.html

<div class="sidebar" id="sidebar">

  <div class="sidebar-inner slimscroll">
    <div id="sidebar-menu" class="sidebar-menu">
      <ul>
        <li class="active">
          <a href="index.html"><i class="la la-dashboard"></i> <span>Dashboard</span></a>
        </li>

        <li class="submenu">
          <a href="#"><i class="la la-phone"></i> <span> Users</span> <span class="menu-arrow"></span></a>
          <ul style="display: none;">
            <li><a href="voice-call.html">Manage Users</a></li>

          </ul>
        </li>
        <li>
          <a href="projects.html"><i class="la la-rocket"></i> <span>Projects</span></a>
        </li>
        <li>
          <a href="tasks.html"><i class="la la-tasks"></i> <span>Tasks</span></a>
        </li>
        <li class="submenu">
          <a href="#"><i class="la la-phone"></i> <span> Health Conscious</span> <span class="menu-arrow"></span></a>
          <ul style="display: none;">
            <li><a href="voice-call.html">Manage Programs</a></li>
            <li><a href="video-call.html">Manage Quix / Tests</a></li>
            <li><a href="outgoing-call.html">Broadcast Message</a></li>
            <li><a href="incoming-call.html">Google Play Settings</a></li>
            <li><a href="incoming-call.html">iTunes Settings</a></li>
          </ul>
        </li>
        <li>
          <a href="contacts.html"><i class="la la-book"></i> <span>Contacts</span></a>
        </li>

        <li>
          <a href="employee-dashboard.html"><i class="la la-tachometer"></i> <span>Employee Dashboard</span></a>
        </li>
        <li class="submenu">
          <a href="#" class="noti-dot"><i class="la la-user"></i> <span> Employees</span> <span class="menu-arrow"></span></a>
          <ul style="display: none;">
            <li><a href="employees.html">All Employees</a></li>
            <li><a href="departments.html">On Board New Employee</a></li>
            <li><a href="designations.html">Employee Reports</a></li>

          </ul>
        </li>

        <li>
          <a href="tickets.html"><i class="la la-ticket"></i> <span>Tickets</span></a>
        </li>
        <li>
          <a href="events.html"><i class="la la-calendar"></i> <span>Events</span></a>
        </li>
        <li>
          <a href="inbox.html"><i class="la la-at"></i> <span>Email</span></a>
        </li>
        <li>
          <a href="chat.html"><i class="la la-comments"></i> <span>Chat</span> <span class="badge badge-pill bg-primary float-right">5</span></a>
        </li>
        <li>
          <a href="assets.html"><i class="la la-object-ungroup"></i> <span>Assets</span></a>
        </li>
        <li>
          <a href="knowledgebase.html"><i class="la la-question"></i> <span>Knowledgebase</span></a>
        </li>
        <li>
          <a href="policies.html"><i class="la la-file-pdf-o"></i> <span>Policies</span></a>
        </li>
        <li>
          <a href="activities.html"><i class="la la-bell"></i> <span>Activities</span></a>
        </li>
        <li>
          <a href="users.html"><i class="la la-user-plus"></i> <span>Users</span></a>
        </li>
        <li class="submenu">
          <a href="#"><i class="la la-pie-chart"></i> <span> Reports </span> <span class="menu-arrow"></span></a>
          <ul style="display: none;">
            <li><a href="expense-reports.html"> User Report </a></li>
            <li><a href="invoice-reports.html"> Invoice Report </a></li>
          </ul>
        </li>
        <li>
          <a href="settings.html"><i class="la la-cog"></i> <span>Settings</span></a>
        </li>

        <li class="submenu">
          <a href="javascript:void(0);"><i class="la la-share-alt"></i> <span>Multi Level</span> <span class="menu-arrow"></span></a>
          <ul style="display: none;">
            <li class="submenu">
              <a href="javascript:void(0);"> <span>Level 1</span> <span class="menu-arrow"></span></a>
              <ul style="display: none;">
                <li><a href="javascript:void(0);"><span>Level 2</span></a></li>
                <li class="submenu">
                  <a href="javascript:void(0);"> <span> Level 2</span> <span class="menu-arrow"></span></a>
                  <ul style="display: none;">
                    <li><a href="javascript:void(0);">Level 3</a></li>
                    <li><a href="javascript:void(0);">Level 3</a></li>
                  </ul>
                </li>
                <li>
                  <a href="javascript:void(0);"> <span>Level 2</span></a>
                </li>
              </ul>
            </li>
            <li>
              <a href="javascript:void(0);"> <span>Level 1</span></a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

</div>

我想做的是，只需从我的索引页面插入这个 html。

我尝试按照有关组件的教程进行操作，但我得到的只是菜单应该去的空白区域。

任何人都可以告诉我如何从外部文件插入 HTML，是否使用敲除。

谢谢你。

约翰

标签： javascriptjqueryknockout.js