Vue: Backbone + Vue

[franciscolourenco]

Is it possible to use Backbone models with Vue?

[yyx990803]

Vue uses plain objects as models, in general it's not compatible with Backbone's Model. Also it's not necessary to use Backbone models with Vue because with plain objects it's fairly simple to implement your own validation/ajax functionalities with other libraries.

[franciscolourenco]

Which other libraries are you thinking of for example?

[yyx990803]

e.g. http://rickharrison.github.io/validate.js/ https://github.com/guillaumepotier/validator.js https://github.com/visionmedia/superagent https://github.com/ForbesLindesay/ajax

[franciscolourenco]

Thank you!
Closing for now..

[baer]

What about using adapters à la Rivets? I'm integrating Vue into an application written in Backbone and since my models have the parse and save logic already built and tested I either have to serialize back and forth by hand or buy in all the way and run multiple code paths.

Most APIs I've worked with (that are not big web startups) are kinda crappy and require some parsing before being passed into the web-app so I don't think that this use case would be so uncommon. This would be an especially rad feature with something like &model and other front end data modeling tools.

var customers = new Customers();
customers.fetch()

if (urlFragment === "customers") {
  // Written in Backbone
  var customersView = new CustomersView({ model: customers })
  customersView.render()
} else if (urlFragment === "customer/*") {
  // Written in Vue
  var customer = findCustomer(customers, urlFragment);
  customerVue(customer);
}

[franciscolourenco]

When I started this issue I was coming precisely from Rivets adapters

[baer]

There is a need in js land for good stand data modeling and it's absence is being made conspicuously obvious by the new wave of view layer frameworks like Vue, React, Ractive etc. Full featured libraries saw the need but haven't opened up to the wider community yet. Ember has ember-data, Angular has $resource Backbone has Backbone.Model.

The best tool I've seen so far is ampersand-model and since it allows access to data with the . accessor it may even be observable in a way that Vue can deal with. I haven't looked deep enough into Vue source to know.

@yyx990803 I'm sure sure super busy getting 0.11 out the door but do you have any thoughts on how vue-resource would work or if adapters are possible?

[yyx990803]

There's an example I once wrote using Vue with a Backbone Model: http://jsfiddle.net/x1jeawzv/2/
In it's essence, since vm.$data can be manipulated independently, anything that wraps and operates on a POJO can be used as the persistence layer.

[boussou]

@yyx990803 This is awesome.
I'll try to make it work with collections too just for fun.
This is a relevant for people who has existing backbone apps & want to get rid of the BB view part.

[boussou]

I made a test, it works partially : http://jsfiddle.net/x1jeawzv/4/

then if you do this it works partially

list.add(new Backbone.Model({
        name: 'hello'
    }))

incomplete, as I see a lot to do before it is complete: too much work (sync the other way, update newly added models because the stuff created() must be performed on them, ..)

it ends up in maintainning two arrays of objects syncrhonized, unless you choose to refresh the full array at each array change.