16

el が設定されていない場合、ビュー バックボーンを作成すると空の div-container が作成されます。(this.$el.html(this.template(this.model.toJSON())))そのdivに挿入されたテンプレート。このラッパーを回避する方法は? ラッパーのないきれいなテンプレートが必要なので、好きな場所に挿入できますか? jobView.$e.children()多くの要素で呼び出すのは合理的ではありません。

<script id="contactTemplate" type="text/html">
                <div class="job">
                    <h1><%= title %>/<%= type %></h1>
                    <div><%= description %></div>
                </div>     
</script>     

var JobView = Backbone.View.extend({
        template:_.template($("#contactTemplate").html()),

        initialize:function () {
            this.render();
        },
        render:function () {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
});

var jobView = new JobView({
   model:jobModel
});          

console.log(jobView.el);
4

6 に答える 6

15

この質問に対する本当の答えはまだ提供されていないと思います。divテンプレートからを削除し、classNameプロパティをJobView！に追加するだけです。これにより、必要なマークアップが作成されます。

テンプレート：

<script id="contactTemplate" type="text/html">
     <h1><%= title %>/<%= type %></h1>
     <div><%= description %></div>
</script>

景色：

var JobView = Backbone.View.extend({
            className: 'job', // this class will be added to the wrapping div when you render the view

            template:_.template($("#contactTemplate").html()),

            initialize:function () {
                this.render();
            },
            render:function () {
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            }
    });

電話renderをかけると、目的のマークアップが表示されます。

<div class="job">
  <h1><%= title %>/<%= type %></h1>
  <div><%= description %></div>
</div>
于 2012-11-28T12:32:13.057 に答える
7

返信が遅くなり、申し訳ありませんが、これはすでに解決されている可能性があります。私は、できるだけ簡単にテンプレートとビューを作成するのが最善だと考えています。テンプレートにはハンドルバーを使用します。

用途に関係なく、各テンプレートには HTML 要素を関連付ける必要があります。そのため、ビューで必要な要素を選択し、その要素をテンプレートから削除してください。次に、ビューの属性を設定して、削除したテンプレート要素の属性を反映できます。

var yourview = Backbone.View.extend({
{
     tagName    : *whatever element ( i.e. section, div etc ),
     attributes : {
           id    : 'your element id'
           class : 'your element class'
           etc
     },
})

次に、テンプレートでその要素を削除します。この要素は、レンダリング メソッドを変更するのではなく、テンプレートをラップせずに適切に作成されます。

于 2013-09-05T21:06:39.133 に答える
5

You can render the view into any container you like either specifying the $el property yourself or using the setElement() method before calling render:

var jobView = new JobView({
  model:jobModel
});          

jobView.setElement($('#your_selector_here'));

console.log(jobView.el);

If you look at the docs for View.el you'll see that you can also specify the el property either when writing your view, or by passing a parameter in the constructor.

于 2012-11-28T09:45:12.953 に答える
2

I have had this same problem with Backbone. In my opinion it is a design flaw. Here is a Reddit post describing some of the solutions possible: http://www.reddit.com/r/javascript/comments/11pkth/how_do_you_render_your_backbonejs_views/

Here is Jeremy Ashkenas' take on the issue:

| If I want to completely encapsulate the HTML inside of my template, without creating any extra divs, | I must replace this.el. At least as far as I know. Is there any better way to do this?

Give up your desire to do that, and you'll have a much easier time ;) A big part of the point of Backbone always providing a view's element ("el") for you, is that your events are valid at all times -- regardless of whether the view is in the DOM, if the data is ready yet, or if the template is available. It's a more stateless way to declare your mouse and keyboard events, relying less on the required ordering of your rendering. If you really want to replace a view's element, use setElement. But it's not recommended, or necessary.

于 2012-11-28T09:44:45.540 に答える
0

良くも悪くも、Backbone では、ビューによって提供される を使用し、そのビューの、、およびプロパティを使用elして好みに合わせて微調整することが期待されます。tagNameclassNameidattributes

このアプローチの明らかな問題は、明日がないかのように JS と HTML を組み合わせることです。私の意見では、物事を適切に分離しておく方が良いです。の特性はel、テンプレートとともに指定する必要があります。

2014 年に、この問題を解決することを目的としたドロップイン コンポーネントBackbone.Declarative.Viewsを作成しました。これはおそらく、私のすべてのオープンソース製品の中で最も過小評価されていますが、問題なく機能します。

どのように？

プロジェクトに Backbone.Declarative.Viewsを含めます。次に、これらのel定義プロパティをテンプレートのデータ属性に入れます。

<script id="my-template"
        type="text/x-template"

        data-tag-name="p"
        data-id="myContainer"
        data-class-name="someClass orOther">

    <!-- template content here -->

</script>

ビューにtemplate: "#my-template"プロパティがある場合は、次のようelに設定されます。

<p id="myContainer" class="someClass orOther"></p>

それだけです。詳細については、ドキュメントをご覧ください。

なぜデータ属性なのか?

データ属性を使用すると、HTML 関連のものを HTML ファイルとテンプレートに保持し、Javascript から除外するという基本的な問題が解決されます。同時に、このアプローチは、Backbone で通常行われている方法と完全に互換性があります。

tagNameつまり、既存のすべてのバックボーン テンプレートは、 Javascript 全体に散らばっているすべての定義が通常どおり適用されるのと同じように、引き続き正常に機能します。他のバックボーン拡張機能やプラグインとの競合が回避され、レガシー コードを変更する必要がありません。これにより、Backbone.Declarative.Views を事実上すべてのプロジェクトに安全に含めることができます。

于 2015-10-20T09:31:23.950 に答える