如何使用Backbone.js表示页面的二维网格？

我是相当新的 Backbone ，所以我正在寻找一些建筑建议的一个新项目。
我有一个二维网格的页面（像Map瓷砖），我想显示和导航通过他们。我正在使用 Backbone.js 在其他领域的网站，我想它会帮助这里也？
示例：（图片位于底部）
一个用户在Page1上。他们点击页面右边的一个链接。我从我的Web服务器加载该页面，到右边视图之外的一个新元素中，然后将其“滑动”到位。
(My最终目标是在后台加载所有周围的页面，这样当用户点击时，转换是立即的。因此，我想将其存储在某种 Backbone 模型设置中）
（我知道有很多幻灯片演示文稿库，但这不是我想要实现的，所以我需要一些我可以从头开始定制的东西）
谢谢你：）

演示

我写了一个2D网格系统的一个小演示与 Backbone .JS：http://www.atinux.fr/demos/2d-grid/
它没有像预渲染图像这样的改进...
解释
很简单，我只有一个系列和一个视图。
每个图片都是一个模型，其坐标在Id中（示例：{ id: '0x5' }，此处x = 0，y = 5）。所有模型都存放在视图的集合中。
该视图绑定箭头，然后用户单击它：
1.我改变了实际坐标
1.我用新坐标得到集合上的模型
1.我用过渡来改变实际背景。
数据
模型的数据是一个哈希数组：

[
    {
        id: '0x0',
        url: 'assets/images/pics/rice.jpg'
    }, {
        id: '0x1',
        url: 'assets/images/pics/beach.jpg'
    }, {
        id: '1x0',
        url: 'assets/images/pics/cold.jpg'
    }
]

编号

视图的HTML：

<div id="grid">
    <div class="bg-trans"></div>
    <div class="bg"></div>
    <a class="arrow top"></a>
    <a class="arrow left"></a>
    <a class="arrow right"></a>
    <a class="arrow bottom"></a>
</div>

网格视图：

Backbone.View.extend({
    initialize: function () {
        // Coordinates of the actual picture
        this.x = 0;
        this.y = 0;
        // Show actual picture (actual model, position 0x0)
        this.$('.bg, .bg-trans').css('background-image', "url('"+this.model.attributes.url+"')");
        // Display available arrows
        this.showArrows();
    },
    // bind arrows
    events: {
        'click .left': 'moveLeft',
        'click .right': 'moveRight',
        'click .top': 'moveTop',
        'click .bottom': 'moveBottom'
    },
    // Return the actual coordinates by defaults (without parameters)
    coord: function (x, y) {
        x = (x == null ? this.x : x);
        y = (y == null ? this.y : y);
        return x + 'x' + y;
    },
    // Show available arrows
    showArrows: function () {
        // jQuery here, no important for the answer
        // [...]
    },
    // When use click on left arrow
    moveLeft: function () {
        var newCoord = this.coord(this.x - 1),
            model = this.collection.get(newCoord);
        if (model) {
            this.x--;
            this.model = model;
            // ANIMATION
            // [...]
            /////////////////////
            this.showArrows();
        }
    },
    moveRight: function () {
        var newCoord = this.coord(this.x + 1),
            model = this.collection.get(newCoord);
        if (model) {
            this.x++;
            this.model = model;
            // ANIMATION
            // [...]
            /////////////////////
            this.showArrows();
        }
    },
    moveTop: function () {
        console.log(this.y - 1);
        var newCoord = this.coord(null, this.y - 1),
            model = this.collection.get(newCoord);
        if (model) {
            this.y--;
            this.model = model;
            // ANIMATION
            // [...]
            /////////////////////
            this.showArrows();
        }
    },
    moveBottom: function () {
        var newCoord = this.coord(null, this.y + 1),
            model = this.collection.get(newCoord);
        if (model) {
            this.y++;
            this.model = model;
            // ANIMATION
            // [...]
            /////////////////////
            this.showArrows();
        }
    }
})

在任何时候，你都可以访问在实际模型网格上显示的gridView.model，因为我们定义this.model时我们改变了坐标。

所有代码

当然，您可以在此处下载所有代码（.zip）：http://www.atinux.fr/demos/2d-grid.zip

如何使用Backbone.js表示页面的二维网格？

1条答案

演示

所有代码

相关问题

热门标签

最新问答