4

骨干新手在这里。我想开始在 Web 应用程序（后端是 Ruby on Rails）上使用骨干网，到目前为止，它的客户端功能非常少（一些用于执行 slideToggles 的 jquery 和几个 ajax 调用）。

我面临的问题之一是 Backbone 似乎是为了让你加载你的 javascript，然后让它向服务器请求数据（通常是 JSON），然后它呈现视图。在我的情况下这是不可接受的。我想获取源自服务器的 html，将其呈现给用户，然后使用该 html 填充我的模型（之后，我对从服务器请求 JSON 内容的模型很好）。

我猜我需要的是某种“逆视图”。给出这个 html 的东西：

<ul class="people">
  <li><span class="name">Peter</span></li>
  <li><span class="name">John</span></li>
</ul>

一个 People Collection 和一个带有 name 属性的 Person 模型，可以从中解析出 Peter 和 John（可能使用 View）。

这是存在的东西吗？我是以错误的方式处理整个事情吗？

4

4 回答 4

5
于 2013-01-30T14:06:19.500 回答
3

我最终只是在每个视图的元素上添加了我需要的每个模型的 json。

换句话说：

<ul class="people" data-collection="people">
  <li data-model="person" data-attributes='{"name":"Peter"}'>Peter</li>
  <li data-model="person" data-attributes='{"name":"John"}'>John</li>
</ul>

在我的例子中，每个属性上的 JSON 片段在服务器上生成是微不足道的。

我更喜欢在 html 中包含嵌入的 json 而不是在开始时将它返回到一个大数组中的原因是，这样我可以很容易地将模型附加到他们的视图中。

其余的从那里流出。

我使用 jquery 来检测data-collections并创建与 DOM 元素关联的相应视图。然后我解析模型，最后我开始在集合视图上监听事件。

$(function(){
  $('[data-collection="people"]').each(function() {
    var view = new PeopleView({el: this});
    view.parse();
    view.listen();
  });
});

和方法如下所示parse：listen

MyApp.PeopleView = Backbone.View.extend({
  collection: MyApp.Collections.People,
  ...
  parse: function() {
    var people = this.$("[data-model='person']").map(function(i,el){
      return new MyApp.Models.Person($(el).data('attributes'));
    };
    this.collection.reset(comments, {silent: true});
  },
  listen: function() {
    this.listenTo(this.collection, 'add',   this.showNewPerson, this);
    this.listenTo(this.collection, 'reset', this.renderEveryone, this);
    this.delegateEvents();
  }
  ...
});

在这种特殊情况下，我不需要为列表中的每个人创建特定的 Backbone 视图。但如果我需要，我可以在parse方法中这样做。

于 2013-02-28T15:56:14.313 回答
1

您可以使用服务器或客户端代码预渲染 HTML。尽管我不确定为什么在您的情况下必须通过 AJAX 加载 HTML。无论如何，BackboneModel或Collection在您对其进行获取之前并不真正了解其定义。

底线是，您可以预加载预定义的View并使用 Backbone 进行更改。在您的情况下，如果您希望 Backbone 对您的 进行操作$('.people')，您只需在加载新记录之前追加新行或清空元素即可。

至于Models从渲染中解析您的实际View值，不确定为什么要这样做，但您可以使用jQuery并选择html()or遍历它text()。

如果您可以执行AJAX请求，我不明白为什么发送实际Model会是一个问题。

var json = { people: [{name: 'Peter' },{name: 'John' }]};

Backbone 在使用和主要结构基础方面没有任何限制。希望这可以解决您的问题。

于 2013-01-30T13:35:07.327 回答
1

我正在使用Backbone LayoutManager来执行此操作。您可以定义一个 fetch() 函数，可以远程获取视图（即您的服务器）。例如，它们然后被缓存在 Javascript 模板对象中。

一些取自Backbone BoilerPlate的代码：

var app = { root: "/" };
var JST = window.JST = window.JST || {};

// Configure LayoutManager
Backbone.LayoutManager.configure({

  ....


  fetch: function(path) {
    var done;
    path = path + ".html";

    if (!JST[path]) {
      done = this.async();
      $.ajax({ url: app.root + path }).then(function(contents) {
        JST[path] = _.template(contents);
        done(JST[path]);
      });
    }
    return JST[path];

  }
});
于 2013-01-30T15:02:24.210 回答