Javascript 如何从Backbone.js中的现有html创建集合？

我正在将Backbone.js集成到一个项目中，在制作边栏集合时遇到了一些问题

争论的问题是如何将Smarty html标记生成的内容转换为模型集合。通常的解决方案是在前端使用模板，但在我的例子中这是不真实的

我的侧边栏的标记：

{foreach from=$mod.nodes item=section}
{$section.title}

{foreach from=$section.nodes item=i}
{$i.title}
{/foreach}

{/foreach}

我想将每个

.nav块

绑定到模型：

var导航=Backbone.Model.extend({
默认值：{
“可见”：true
}
});

当从视图触发事件时，模型更改属性可见：

var NavigationView=Backbone.View.extend({
标高：$（'导航块'），
活动：{
“单击h2”：“切换可见”
},
初始化：函数（）{
this.model.bind（'change:visible'，this.render，this）；
},
toggleVisible:function（）{
this.model.toggle（'visible'）；
},
render:function（）{
}
});

作为

.nav块

div，如果不是由前端创建的，则必须在Jquery选择器中循环创建视图，并将每个视图绑定到模型，并使用

view.setElement（）

将此视图EL设置为Jquery返回的对象。您可以通过以下方式将主干视图应用于现有html标记：

$(function () {
    $('.nav-blocks > .nav-block').each(function(index, el) {
        new NavigationView({ model: new Navigation(), el: el });
    });
});

---

在

工作的js FIDLE模型不应该有可见属性，这是一个显示问题，应该存在于视图中。