为什么我不能得到我的视图的两个实例来渲染?

why can't I get two instances of my view to render?

本文关键字：两个 实例 不能 我的 视图 为什么      更新时间：2023-09-26

我是backbone.js和JavaScript的新手。我试图用Jquery和backbone.js建立一个简单的小部件系统，但我似乎无法弄清楚如何获得我的视图的多个实例来渲染。我是，然而能够得到一个实例渲染…我的最终目标是建立一个系统，在这个系统中，我可以点击一个按钮，并让它每次在屏幕上呈现一个新的小部件。下面是我的代码:

    <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});

任何帮助将是非常感激的，如果我做任何事情真的很奇怪，我将喜欢建议如何做得更好。

当您在视图中设置el属性时，您将视图绑定到dom中的现有元素，从而限制您只能创建一个小部件。您实际需要做的是让视图生成元素标记，并将所有生成的小部件附加到某个父组件上。您可以通过在视图中设置tagName, className和id属性来做到这一点。

例如:

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

这将生成一个div和一个wrapper类，您可以将其附加到容器中。

之后，定义一个click事件来每次创建一个新的小部件:

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

在骨干开发人员中，从视图的渲染方法返回this被认为是一个很好的实践。这样你就可以像这样混合最后两行:

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

此外，如果在视图定义之前实例化集合，人们倾向于将集合作为构造函数参数的属性传递:

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

现在您可以通过简单的this.collection在视图中引用集合。

相关文章：