木偶 - 用空数据填充集合大小集合

时间：2015-03-17 19:31:51

标签： javascript html backbone.js marionette dataformat

我正在尝试填充一组列表，只使用一定数量的元素来指定它们需要添加到哪一行。

实施例： 每个节点项都有一个对应于特定UL的数字以及要添加到哪个位置，但元素的“总”数已经是已知的。

简化示例数据（假设预定数组大小为5）：

nodes = new Entities.NodeCollection([
  { listID: 1, position: 2, name: "node2" },
  { listID: 1, position: 5, name: "node5" },
  { listID: 2, position: 4, name: "node4" }
]);

预期产出： 每个节点都插入到正确的位置，其余的位置填充空LI。

<ul id="list1">
  <li></li>
  <li><div class="template-class" id="node2"></div></li>
  <li></li>
  <li></li>
  <li><div class="template-class" id="node5"></div></li>
</ul>
<ul id="list2">
  <li></li>
  <li></li>
  <li></li>
  <li><div class="template-class" id="node4"></div></li>
  <li></li>
</ul>

预期产出：

如何创建一个模板，让我将数据插入正确的位置并自动填充缺失的部分？

我可以轻松地使用jQuery，（预先填充正确的长度，只选择孩子＃），但我需要使用Marionette / Backbone来构建应用程序的事件管理和数据库查询。

最糟糕的情况是，能够循环遍历已知的元素并检查是否存在应该去的数据点，根据需要填写正确的html（或空的），但这似乎不是常见的木偶/骨干范例。

我认为我的实际行正确的模板; 

<script type="text/template" id="node-list-item">
  <div class="template-class" id="<%- name %></div>
</script>

和观点：

RowView = Backbone.Marionette.ItemView.extend({
  tagName: "li",
  template: "#node-list-item"
  //something goes here to correctly handle empty pieces?
});

ListView = Backbone.Marionette.CompositeView.extend({
  itemView: RowView,
  itemViewContainer: "ul",
  //I don't think template implementation isn't important for this example
  template: "#list-layout"
});

我是否只是错了，我应该在添加到集合之前修改数据集以包含空白部分？ （如果是这样，我需要根据源数组项是否为空来切换模板，但这似乎是一个不同的蠕虫，有过多的空数据点。）

最终，输出就像一个表，但数据是以列为导向的方式构建的，我发现在尝试构建它时有点迷惑。空行确保所有项目都排成一行，并希望有助于进一步简化jQuery调用。

完整的预期输出示例代码段：

#main-content {
    background: #ccc;
    position: relative;
}
#iconrow {
    border-bottom: solid 1px #999
}
.col-xs-0 {
    width: 55px;
    padding: 0px;
    position: relative;
    float: left;
    min-height: 1px;
}
.icon {
    width: 100%;
    height: 0;
    padding-bottom: 99%;
    margin: 15px 0px;
    border-radius: 100%;
    border: 1px solid #999;
    background: white
}
.timeline {
    padding: 30px 0px;
    position: relative;
}
.timeline ul {
    padding: 0px;
    list-style: none;
    margin: 0px;
    position: relative;
}
.timeline li {
    position: relative;
    width: 100%;
    height: 50px;
    display: block;
}
.timeline li:before {
    width: 6px;
    height: 100%;
    margin-left: -3px;
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    background: #cc7264;
    content: ' ';
}
.timeline .node2 {
    width: 24px;
    height: 24px;
    margin-left: -12px;
    margin-top: 0px;
    z-index: 2;
    background: #eee;
    border: 4px solid #cc7264;
    position: absolute;
    left: 50%;
    top: -1px;
    border-radius: 100%;
}
.timeline .node2:hover {
    width: 48px;
    height: 48px;
    margin-left: -24px;
    margin-top: -12px;
    border-width: 6px;
}
.timeline .node2:active {
    width: 36px;
    height: 36px;
    margin-left: -18px;
    margin-top: -6px;
    background: #eebaa9;
    border-width: 6px;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="main-content">
	<div class="row clearfix">
		<div class="col-xs-0"></div>
		<div class="col-xs-2 timeline">
			<ul class="year y2014">
				<li> <div class="node2"></div></li>
				<li> </li>
				<li> </li>
				<li> <div class="node2"></div></li>
				<li> <div class="node2"></div></li>
				<li> </li>
				<li> <div class="node2"></div></li>
				<li> </li>
				<li> </li>
				<li> </li>
				<li> </li>
				<li> <div class="node2"></div></li>
			</ul>
			<ul class="year y2015">
				<li> <div class="node2"></div></li>
				<li> </li>
				<li> </li>
				<li> <div class="node2"></div></li>
				<li> <div class="node2"></div></li>
				<li> </li>
				<li> <div class="node2"></div></li>
				<li> </li>
				<li> </li>
				<li> </li>
				<li> </li>
				<li> <div class="node2"></div></li>
			</ul>
		</div>

		<div class="col-xs-2 timeline">
			<ul>
				<li> </li>
				<li> <div class="node2"></div></li>
				<li> <div class="node2"></div></li>
				<li> </li>
				<li> <div class="node2"></div></li>
				<li> </li>
				<li> </li>
				<li> </li>
				<li> <div class="node2"></div></li>
				<li> <div class="node2"></div></li>
				<li> </li>
				<li> </li>
			</ul>
		</div>

		<div class="col-xs-2 timeline">
			<ul>
				<li> </li>
				<li class="disabled"> <div class="node2"></div></li>
				<li class="disabled"> </li>
				<li class="disabled"> </li>
				<li class="disabled"> </li>
				<li class="disabled"> </li>
				<li class="disabled"> </li>
				<li class="disabled"> </li>
				<li class="disabled"> </li>
				<li class="disabled"> </li>
				<li class="disabled"> <div class="node2"></div></li>
				<li class="disabled"> </li>
			</ul>
		</div>

		<div class="col-xs-2 timeline">
			<ul>
				<li class="disabled"> <div class="node2"></div></li>
				<li class="disabled"> </li>
				<li class="disabled"> </li>
				<li class="disabled"> <div class="node2"></div></li>
				<li class="disabled"> <div class="node2"></div></li>
				<li class="disabled"> <div class="node2"></div></li>
				<li class="disabled"> <div class="node2"></div></li>
				<li class="disabled"> </li>
				<li class="disabled"> </li>
				<li class="disabled"> <div class="node2"></div></li>
				<li class="disabled"> </li>
				<li class="disabled"> <div class="node2"></div></li>
			</ul>
		</div>

	</div>
  </div>

谢谢！

1 个答案:

答案 0 :(得分：0)

我的解决方案最终是创建辅助函数来填充数据，并简化新模型的制作。

我首先制作节点模型的主集合，因此每个节点获得主干cID和单个处理程序，然后我使用集合＆＃34;其中＆＃34;功能（来自underscore.js）以获取与该组匹配的节点数组。 nodeCollection.where({listID:1})

使用这个特定于列表的数组，我可以创建一个大小为N的空数组var emptyArray = Array(N)，并在特定于列表的节点上创建一个简单的foreach循环，用节点对象替换数组中的位置。 （注意：此数组填充了＆＃34;未定义的＆＃34;对象）

for(node in nodeSublist){
  i=node.get("position")-1;//subtract 1 for 0-based array position
  emptyArray[i]=node;
}

使用这个填充的节点数组，我可以然后将该数组放入一个新的集合对象中。 new Entities.NodesCollection(paddedArray)。 Backbone不会创建新的Node对象，因为它们已经实例化了。

我将这个新填充的nodeCollection设置为新的＆＃34;列表中的属性＆＃34;模型，每个列表。然后在列表的CollectionView中，我只需将视图的集合设置为initialize:传递中模型中的节点列表。 

initialize: function(){
    this.collection = this.model.get("nodes");
}

我可以创建这些列表模型的集合，现在我拥有了我需要的每个对象。用于Lists数组的简单CollectionView将输出容器并呈现每个NodeList视图。每个Nodelist将输出UL，并在Node ItemView或Empty ItemView之间切换。

var NodeList = Marionette.CollectionView.extend({
    tagName: "ul",
    getChildView: function(node){
        //this is a real node
        if(node.get("name")){
            return List.NodeView;
        }
        //otherwise this node is empty, dont render anything
        else{
            return List.EmptyNodeView;
        }
    },
    initialize: function(){
        this.collection = this.model.get("nodes");
        //you cannot set the class on initialize, 
        //because the DOM object is created before the initialize function,
        //so use jquery.
        this.$el.addClass("list"+this.model.get("listID"));
    }
}

我们很好！

感谢@Seebiscuit让我入门！

相关问题
最新问题