4

ここのバックボーン初心者。Web アプリ (バックエンドは Ruby on Rails) でバックボーンの使用を開始したいと考えていますが、これまでクライアント機能はほとんどありませんでした (slideToggles を実行するための jquery といくつかの ajax 呼び出し)。

私が直面している問題の 1 つは、バックボーンが、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 を事前にレンダリングできます。あなたの場合、HTMLをAJAX経由でロードする必要がある理由はよくわかりませんが。いずれにせよ、バックボーンModelまたはバックボーンCollectionは、フェッチを行うまでその定義について実際には知りません。

肝心なのは、定義済みをプリロードしViewて、バックボーンで変更できるということです。あなたの場合、Backbone を で操作したい場合は、$('.people')新しい行を追加するか、新しいレコードをロードする前に要素を空にするだけです。

Modelsレンダリングされたから実際のを解析する限り、Viewなぜそうすべきかはよくわかりませんが、またはを使用してトラバースしjQuery、選択することができます。html()text()

リクエストを実行できる場合AJAX、実際の送信が問題になる理由がわかりませんModel。

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

バックボーンは、用途と主に構造基盤に関して制限を課しません。これで問題が解決することを願っています。

于 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 に答える