在Backbone.js中获取和检索数据的正确方法

时间:2013-09-20 09:24:17

标签: javascript backbone.js

我试图了解使用Backbone.js获取数据后如何以及在何处使用数据,但我有点困惑。
我会解释一下情况 我有一个应用程序,在启动时,从服务器获取一些数据。三种不同的数据。
我们假设飞机,自行车,汽车 为此,我在三个集合(飞机,汽车,自行车)中插入了获取这些数据的URL。
我已经覆盖了解析方法,因此我可以修改我获得的字符串,对其进行排序,并将其放在对象和localstorage中。我需要它持久化,因为我需要使用这3个数据结构 因此,通过获取,我获取所有这些数据并将它们放在localstorage中。这样做是否正确?

现在我需要对服务器进行其他调用,例如“获取最近的汽车” 在视图中我需要查看汽车的颜色,名称和型号,所有信息都在localstorage中的“Cars”对象内。
在我看来“showcars.view”我只是调用一个非主干js,(不是集合,模型或视图),我得到了我需要的所有信息。在这个js我做:

var carmodel = new Car(); //car is the backbone model of the cars
carmodel.url = '/get/nearest/car'; //that give id of the nearest car
carmodel.fetch ({
       success: function () {}
//here i search the Cars object for a car with the same id 
//and get name, color, model and put them in sessionstorage
})

所以在那次调用之后,在视图中我可以从sessionstorage获取我需要的数据。 这是一种糟糕的做事方式吗?如果是这样,我应该如何获取和分析这些信息?我应该在模型中进行所有调用和操作吗? 感谢

2 个答案:

答案 0 :(得分:1)

这将是您实现所需内容的方式。

var Car = Backbone.Model.extend();
var Cars = Backbone.Collection.extend({
  model: Car,
  url: '.../cars'
});
var NearestCar = Backbone.Model.extend({
  url: '...nearest/car'
});

var cars = new Cars();
var nearestCar = new NeaerestCar();
cars.fetch({
  success: function() {
    nearestCar.fetch({
      success: function(model) {
        var oneYouWant = cars.get(model.get('id'));
        // do something with your car
        // e.g.:
        // var carView = new CarView({model: oneYouWant});
        // $('body').append(carView.render().el);
      });
    });
  });
});

答案 1 :(得分:1)

通常,Backbone会将所有内容保存在内存中(即浏览器内存),因此无需将所有内容保存到本地存储中,只要您的Collection对象可以从您所在的范围内以某种方式访问​​(保留)简单的事情就是说这是全局window范围。

所以在你的情况下,我会有三个集合:

window.Cars
window.Airplanes
window.Bikes

现在你想要离你最近的。假设您处于Backbone View并且正在响应某个事件,在您的位置我会做这样的事情(只显示有意义的代码):

var GeneralView = Backbone.View.extend({

    events: { "click .getNearestCar": "_getNearestCar" },

    _getNearestCar: function () {

        $.getJson('/get/nearest/car', function (data) {
            // suppose the data.id is the id of the nearest car
            var nearestCar = window.Cars.get(data.id)
            // do what you plase with nearestCar...
        });
    }

});