3

Backbone.js を使用して、垂直テーブル列をビュー 'el' として使用して成功した人はいますか? テーブルは行ベースであるため、ビューに関連付けられた DOM コンテナーとしてテーブル行を使用するのは簡単です。ただし、実装する必要があるレイアウトは垂直であるため、テーブルの列は私のデザインの「el」になりますが、テーブルのレイアウトは水平であるため、テーブルの列には同様のコンテナー要素がありません。

これまでのところ、テーブル列の子ビューを正常に作成できませんでした。つまり、テーブル列を取得して操作するためにデータを DOM に関連付けています。私の設計ははるかに複雑になりました。そのため、子ビューを介してこのシナリオを管理するためのより良い方法があることを期待して、元のアプローチを再評価しています。何か案は？

4

2 に答える 2

3

あなたはその事実を利用することができます

  • jQuery オブジェクトは DOM 要素のリストです
  • バックボーンは一意の DOM ノードを必要としません (少なくとも私が知る限り)
  • this.$elビューでは、必要なノードにすることができます

それを念頭に置いて、テーブルを一度にレンダリングし ( BackboneJS Rendering Problemsを参照してください。より高速で、おそらくはるかに簡単です)、モデルに関連付けられたテーブル セルにサブビューを適用できます。選択にはクラス名を使用しましたが、各行の n 番目の要素のセレクターが機能するはずです。

テンプレート 

<table>
    <thead>
        <tr>
            <th></th>
            <% _(children).each(function(model) { %>
                <th><%= model.id %></th>                
            <% }); %>
        </tr>
    </thead>
    <tbody>
    <% _(properties).each(function(prop) { %>
        <tr>
            <td><%= prop %></td>
            <% _(children).each(function(model) { %>
                <td class="<%= model.cid %>"><% print(model[prop]); %></td>
            <% }); %>
        </tr>
    <% }); %>
    </tbody>
 </table>

意見 

ListView = Backbone.View.extend({
    initialize: function(opts) {
        this.options = opts;
    },
    render: function () {
        var data, html, $table, template = this.options.template;

        data = this.collection.map(function (model) {
            return _.extend(model.toJSON(), {
                cid: model.cid
            });
        });

        html = this.options.template({
            children: data,
            properties: ['id', 'name']
        });

        $table = $(html);

        this.collection.each(function (model, ix) {
            var $el = $table.find("." + model.cid),
                subview = new ItemView({
                    el: $el,
                    model: model
                });
        });

        this.$el.empty();
        this.$el.append($table);

        return this;
    }
});

このデモhttp://jsfiddle.net/nikoshr/psasT/12/で確認できるように、各列は専用のビューによって処理されます。

于 2013-01-22T17:25:13.597 に答える
0

私はあなたの問題に対する簡単な解決策を考えることができません。複数のビューを持つことは、潜在的な悪夢のように聞こえるように<table>要素を共有します。el

別の角度から問題を攻撃し、HTMLテーブルを使用する代わりに、浮動要素からテーブル列を作成し、<div>それらの要素にビューをバインドするのはどうですか？何かのようなもの：

<div class="faux-table">
  <div class="faux-column">
    <div class="faux-header">Col 1</div>
    <div>Foo</div>
    <div>Bar</div>
    <div>Baz</div>
    <div>Qux</div>
  </div>
  <div class="faux-column">
    <div class="faux-header">Col 2</div>
    <div>Foo</div>
    <div>Bar</div>
    <div>Baz</div>
    <div>Qux</div>
  </div>
</div>

そしてCSSルール：

.faux-table > div.faux-column {
    float:left;
}

このフィドルの実用的なサンプル。もちろん、このソリューションは完璧にはほど遠いです。コンテンツのサイズがさまざまである場合は、行のサイズを自分で実装する必要があるためです。ただし、バックボーンビューでテーブルをレンダリングする必要がある場合は、JSの観点からするとこれがおそらく最も簡単な方法です。

編集：実際、私には、はるかに優れた、より脆弱でない解決策は、テーブル<td>要素を列として使用し<div>、CSSフローティングハックなしで行をsとして実装することです。

<table>
    <tr>
        <td class="faux-column">
            <div class="faux-header">Col 1</div>
            <div>Foo</div>
            <div>Bar</div>
            <div>Baz</div>
            <div>Qux</div>
        </td>
        <td class="faux-column">
            <div class="faux-header">Col 2</div>
            <div>Foo</div>
            <div>Bar</div>
            <div>Baz</div>
            <div>Qux</div>
        </td>
    </tr>
</table>

このフィドルの改訂版。

于 2013-01-22T16:51:27.870 に答える