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

我对主干网比较陌生，所以我正在为一个新项目寻找一些架构建议

我有一个二维的页面网格（如地图分幅），我想在其中显示和导航。我正在网站的其他领域使用主干网，我想它在这里也会有帮助吗

示例：（底部的图像）

用户位于第1页。他们单击页面右侧的链接。我从Web服务器将该页面加载到右侧视图之外的新元素中，然后将其“滑动”到位

（我的最终目标是在后台加载周围的所有页面，这样当用户单击时，转换将立即进行。因此我想将其存储在某种主干模型设置中）

（我知道有很多幻灯片演示库，但这不是我想要实现的，所以我需要一些可以从头开始定制的东西）

谢谢：）

演示 我用Backbone.JS编写了一个2d网格系统的小演示：

它没有像预渲染图像那样的改进

解释 很简单，我只有一个集合和一个视图

每张图片都是一个模型，其坐标位于Id中（示例：

{Id:'0x5'}

，此处x=0，y=5）。所有模型都存储在视图集合中

视图绑定箭头，然后用户单击：

我改变了实际坐标

我用新坐标在集合中得到模型

我通过转换来改变实际背景

资料 模型的数据是一个哈希数组：

[
    {
        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）：