通过JSON控制布局在点击时添加内容

Question

我希望在页面上显示包含堆叠<divs>的4列。在页面上有向前/向后按钮，向右添加一列并从左侧删除（反之亦然），但始终显示4列。

我想通过控制4 col布局位置的属性“key”来控制此布局，例如"layout:col2" "Name:Matt"。密钥也会左右隐藏cols，例如"col-4"到"col+4"，例如：

var testData = {
    A: {name: "Matt", layout: "col1"},
    B: {name: "Aaron", layout: "col2"},
    C: {name: "Dan", layout: "col3"},
    D: {name: "James", layout: "col4"},
    E: {name: "Roy", layout: "col-1"},
    F: {name: "Tim", layout: "col+1"},
}

问题是：

1：开始时不显示4个cols - 添加删除功能正在运行，但不是传送器样式。

2：JSON控制定位

要演示到目前为止我所拥有的内容，其中包含添加删除按钮的粗略布局，

http://plnkr.co/edit/ai6cg0K47Cjh6U9MaUo9?p=preview
http://plnkr.co/edit/mtrug2cgmc4QHqOGnZk0?p=preview