Question

我对Backbone很新，所以我正在为一个新项目寻找一些架构建议。

我有一个2d的网页（比如地图图块），我想显示并浏览它们。我在网站的其他区域使用骨干网，我认为这也有帮助吗？

示例:(图片底部）

用户在Page1上。他们点击页面右侧的链接。我将该页面从我的网络服务器加载到右侧视图中的新元素中，然后将其“滑动”到位。

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

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

谢谢:)

Diagram http://f.cl.ly/items/1r3t1o1p312Q231y072U/Screen%20Shot%202012-01-16%20at%2008.53.16.png

Answer 1

示范

我用Backbone.JS写了一个2d网格系统的演示：http://www.atinux.fr/demos/2d-grid/

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

吃茶

相当简单，我只有一个集合和一个观点。

每张图片都是模型，其坐标位于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）：http://www.atinux.fr/demos/2d-grid.zip

如何使用Backbone.js表示2D网页？

1 个答案:

示范

吃茶

数据

代码

所有代码