《BackboneJS框架的技巧及模式》(2)

《BackboneJS框架的技巧及模式》(2)

本文紧接第一部分：《BackboneJS框架的技巧及模式(1)》

作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chszs

二、为对象创建Fa?ade外观模式

在实际项目中，需求是经常变化的，因此，终端返回的JSON数据格式也是如此。如果你的视图和下层的数据模型是紧耦合的，那么这是一种痛苦。有鉴于此，我为所有的对象都创建getter和setter函数。

此模式使用较广。如果任何底层的数据结构发生了变化，那么视图层无需随之更新；你会有一个数据访问点，所以你不太可能忘记做深度复制，编写的代码将会更易于维护和调试。此模式的缺点在于它可能会导致模型或集合有一点点膨胀。

下面我们看一个例子来阐明此模式。假想我们有一个Hotel模型，它包含了rooms和当前有效的rooms，而且我们希望可以通过床位大小来获取rooms。

var View = Backbone.View.extend({    initialize: function(options) {        // Re-render when the model changes        this.model.on('change:items', this.render, this);    },    template: _.template($('#list-template').html()),    events: {        "#items li a": "setSelectedItem"    },    render: function() {        $(this.el).html(this.template(this.model.toJSON()));    },    setSelectedItem: function(event) {        var selectedItem = $(event.currentTarget);        // Set all of the items to not have the selected class        $('#items li a').removeClass('selected');        selectedItem.addClass('selected');        // Store a reference to what item was selected        this.selectedItemId = selectedItem.data('id'));        return false;    }});

现在我们可以很容易的确定哪些项被选中了，并且我们无需遍历DOM模型。此模式对于存储外部数据来说非常有用，请记住，你可以创建不需有端点相关联的且存储外部视图数据的模型和集合。

此模式的缺点是如果你存储了外部数据到你的模型或集合，它们不能真正遵循RESTful架构，因为它们不能完美的映射Web资源；另外，此模式可能会引起对象的膨胀；如果端点是严格接受JSON格式，那么它可能会引起一些烦恼。

你或许会问自己，“我如何确定我是否应该把外部数据放进视图或者放进模型？”。如果你为呈现添加了额外的属性，例如容器的高度，那么我们把它添加到视图。如果此属性跟下层的数据模型有一定的关系，然后你想把它放进模型。总之一句话，根据实际的需求进行判断。