[英]why can't I get two instances of my view to render?
对于这个问题,我对ebone.js和JavaScript来说是菜鸟。。。我正在尝试使用Jquery和belimber.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'
...
});
这将生成一个带有wrapper
类的div
,您可以将其附加到容器。
稍后,您定义一个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
引用视图内部的集合。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.