Question

我正在使用Backbone，我在几个视图中都有一个相同的菜单。

起初听起来很简单，但我觉得很难实现因为，一旦视图发生变化，我就会清空其中的每个元素。

这让我有两个选择：

每次加载视图时添加菜单;
保持菜单全局，在dom级别，并指示主干不要删除视图上的某些元素更改== 这真是一个糟糕的想法，搞乱所有重要时间。

表现明智，让我说我有以下情况：

// View 1

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

以及：

// View 2 

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

浏览器会做什么，以及jquery会做什么？

如果jquery看到我试图像以前一样添加相同的html，会忽略该命令吗？

有什么想法吗？

你会怎么做？

Answer 1

为导航创建单独的视图。

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

Answer 2

在索引页面中静态创建菜单，并将更改的视图注入带有主干的单独元素：

<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>

Backbone，在视图之间保持相同的菜单

2 个答案: