2

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

有争议的问题是如何将 Smarty html-markup 生成的模型转换为模型集合。通常的解决方案是在前端使用模板，但在我的情况下它是不真实的。

我的侧边栏的标记：

<div class="nav-blocks">
{foreach from=$mod.nodes item=section}
  <div class="nav-block">
    <h2>{$section.title}</h2>
    <ul class="navigation">
    {foreach from=$section.nodes item=i}
      <li>{$i.title}</li>
    {/foreach}
    </ul>
  </div>
{/foreach}
</div>

我想让每个都.nav-block绑定到模型：

var Navigation = Backbone.Model.extend({
  defaults: {
    'visible': true
  }
});

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

var NavigationView = Backbone.View.extend({

  el: $('.nav-block'),

  events: {
    'click h2': 'toggleVisible'
  },

  initialize: function() {
    this.model.bind('change:visible', this.render, this);
  },

  toggleVisible: function() {
    this.model.toggle('visible');
  },

  render: function() {

  }

});
4

2 回答 2

2

您可以通过这种方式将主干视图应用于现有的 html 标记：

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

在http://jsfiddle.net/rJDy4/工作 js fiddle

于 2012-10-17T14:31:48.000 回答
1

作为.nav-block不是由前端创建的 div，您将不得不在 Jquery Selector 中循环创建视图并将每个视图绑定到模型并将此视图 EL 设置为使用 JQuery 返回的对象view.setElement()

于 2012-10-17T12:00:41.763 回答