Fatal编程技术网
  • javascript/
  • Javascript 主干，在视图之间保持相同的菜单

Javascript 主干，在视图之间保持相同的菜单

javascript jquery backbone.js

Javascript 主干，在视图之间保持相同的菜单,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,我使用的是主干，我有一个菜单，在几个视图上保持不变 一开始听起来很简单，但我发现这很难实现，因为一旦视图被更改，我就会清空其中的每个元素 这让我有两个选择： 每次加载视图时添加菜单 在dom级别上全局保留菜单，并指示主干网不要在视图更改时删除某些元素==这真是一个糟糕的想法，把一切都搞砸了 就性能而言，假设我有以下情况： // View 1 $('.nav').html(<div class="mydiv">this is my div</div>); //视图1 $

我使用的是主干，我有一个菜单，在几个视图上保持不变

一开始听起来很简单，但我发现这很难实现，因为一旦视图被更改，我就会清空其中的每个元素

这让我有两个选择：

  • 每次加载视图时添加菜单

  • 在dom级别上全局保留菜单，并指示主干网不要在视图更改时删除某些元素==这真是一个糟糕的想法，把一切都搞砸了

    • 就性能而言，假设我有以下情况：

    // View 1

$('.nav').html(<div class="mydiv">this is my div</div>);

    //视图1
$（'.nav'）.html（这是我的div）；
    及

    // View 2 

$('.nav').html(<div class="mydiv">this is my div</div>);

    //视图2
$（'.nav'）.html（这是我的div）；
    浏览器将做什么，jquery将做什么

    如果jquery发现我正在尝试添加与以前相同的html，是否会忽略该命令

    有什么想法吗

    如何操作？

    在索引页中静态创建菜单，并将不断变化的视图注入到一个单独的元素中，其中包含主干：

    <body>
    <!-- backbone doesn't need to alter this -->
    <div class="nav">
        <ul>
            <li><a href="/view-1">Menu item 1</a></li>
            <li><a href="/view-2">Menu item 2</a></li>
            <li><a href="/view-3">Menu item 3</a></li>
        </ul>
    </div>
    <!-- inject your views into this element when the route changes -->
    <div class="view"></div>
</body>

    

      

    • 

    • 

    •
    为导航创建单独的视图

    <div id="nav-region"></div>
<div id="content-region"></div>

    var navigation = new Backbone.view.extend({});
var viewOne = new Backbone.view.extend({});

$("#nav-region").append(navigation.render().el);
$("#content-region").append(viewOne.render().el);