0

私は backbone.js と JavaScript の初心者です... Jquery と backbone.js を使用して単純なウィジェット システムを構築しようとしていますが、複数のインスタンスを取得する方法がわかりません。レンダリングする私のビュー。ただし、レンダリングするインスタンスを 1 つ取得することはできます...私の最終的な目標は、ボタンをクリックして毎回画面に新しいウィジェットをレンダリングできるシステムを構築することです。ここに私のコードがあります:

    <script type="text/template" id="widget-template">
    <div class="widget-wrap">
        <div class="widget-header">
            <span class="widget-title"><%= widgetInfo.get('title') %></span>
            <span class="widget-close"></span>
            <span class="widget-hide"></span>
            <span class="widget-expand"></span>
        </div>
        <div class="widget-container">
            <!-- this is where the widget content goes --> 

        </div>
</div>
    </script>


    <script typ="text/javascript">

        var baseWidget = Backbone.Model.extend({
            defaults: {
                title: "Base",
                author: "AB",
                multipleInstances: false,
                description: "This is the base widget",
                pathToIcon: "",
                state: "Open",
                position: {left:0, top:0}
                }

        });




    var widgetCollection = Backbone.Collection.extend({
        model: baseWidget

    });

    var widgetcol = new widgetCollection();  

        var baseView = Backbone.View.extend({
            el: '.wraper',
            render: function(pos = {left:0, top:0}) {
                var widget = new baseWidget();
                widgetcol.add(widget); 
                console.log(widgetcol.length); 
                widget.set({'position':pos})




                var template = _.template($('#widget-template').html(), {widgetInfo: widget});
                this.$el.html(template);
                this.$el.offset({top:widget.get('position').top, left:widget.get('position').left})
                $('.widget-wrap').draggable({ 
                    handle: ".widget-header",
                    stop: function (event, ui) {
                        widget.set({position: ui.position});
                        console.log(widget.get('position')); 
                    }

                }); 

            }
        });



        BV = new baseView(); 
        BV.render({left:0, top:0}); 


        b = new baseView();
        b.render({left:500, top:0});

また、私が本当に奇妙なことをしている場合は、それをより良くする方法についてアドバイスをいただければ幸いです。

4

1 に答える 1

3

ビューでプロパティを設定する場合el、ビューを dom 内の既存の要素にバインドし、ウィジェットを 1 つだけ作成するように制限します。実際にやりたいことは、ビューに要素のマークアップを生成させ、生成されたすべてのウィジェットを特定の親に追加することです。tagNameビューで、classNameおよびid属性を設定することで、これを行うことができます。

例えば：

var baseView = Backbone.View.extend({
  tagName: 'div',
  className: '.wrapper'
  ...
});

これにより、コンテナに追加できるdivクラスを持つが生成されます。wrapper

後で、クリック イベントを定義して、毎回新しいウィジェットを作成します。

$('button').click(function() {
  var newView = new baseView();
  newView.render();
  $('.container').append(newView.el); // now 'el' correspond to the div.wrapper you just created
});

thisバックボーン開発者の間では、ビューの render メソッドから戻ることをお勧めします。そうすれば、次のように最後の 2 行を混在させることができます。

$('.container').append(newView.render().el);

また、代わりに、ビューの定義の前にコレクションをインスタンス化する場合、コンストラクター パラメーターのプロパティとしてコレクションを渡す傾向があります。

var collection = new widgetCollection();
BV = new baseView({ collection: collection });

これで、ビュー内のコレクションを簡単に参照できるようになりましたthis.collection。

于 2013-03-31T06:21:07.037 に答える