mitchlloyd / ember-autosave Goto Github PK
View Code? Open in Web Editor NEWAn object proxy to support autosaving models in Ember
License: MIT License
An object proxy to support autosaving models in Ember
License: MIT License
I have a child component that has a model that is a relationship of the parent components model. This child component has an autosave object proxy. When I show a property of the proxied object it does not show up. I think this is because the value of the component object being undefined at render and becoming the required value as the async relationship resolves.
{{#parent-component post=post}}
{{#each post.tags as |tag|}}
{{child-component tag=tag}}
{{/each}}
{{/parent-component}}
{{#child-component}}
{{tagProxy.name}} {{!-- undefined --}}
{{/child-component}}
1.0 has been great, thanks. I was noticing that if, for example, the model contains multiple records (e.g. from this.store.findAll('xyz')
) setting xyz: computedAutosave('model', 1000)
doesn't work. This may be by design. The workaround that I've been using is to simply wrap each record in a component, then set the computedAutosave macro there.
Anyway, if it's by design, you may consider adding a line about it to the docs, otherwise, it could be a nice feature.
It would be useful to adapt this Mixin to also handle (buffer, debounce, submit) changes on (potentially embedded) child elements. Any thoughts on how to go about this? Is there a way of specifying a controller for child elements?
What would be the best way to create a Mixin similar to App.AutoSaving for ArrayControllers? I will give this some thought as well but thought I'd kick this off here.
When I run ember -v
this is what I get.
DEPRECATION: An addon is trying to access project.nodeModulesPath. This is not a reliable way to discover npm modules. Instead, consider doing: require("resolve").sync(something, { basedir: project.root }). Accessed from: DependencyVersionChecker.NPMDependencyVersionChecker (.../node_modules/ember-autosave/node_modules/ember-cli-version-checker/src/npm-dependency-version-checker.js:11:32)
ember-cli: 2.18.0
node: 6.10.2
os: darwin x64
Hi there,
Im using ember 3.0 and i have tried to implement Autosave on both the Component, Route and Controller level.
Code:
import autosave from 'ember-autosave';
export default Component.extend({
post: autosave('model.candidate')
});
I have tried to make a computed property listening to the same model, and this does fire as expected:
Any help would be greatly appreciated.
Best,
Jens
Is there any interest in using the newer syntax for getters and setters in computed properties? The current implementation gives deprecation warnings in the latest 1.13 release. However, I think it would be a breaking change for pre-1.12 apps.
Hey,
I would like to be able to set the buffer delay per controller, which necessitates having it as an overrideable value on the Ember.AutoSaving mixin:
bufferedDelay: 1000
However, due to the context in which _debouncedSave is run (or something thereabouts), @bufferDelay does not work, i.e.
_debouncedSave: Ember.debounce (-> @_safeSave()), @bufferDelay
will not work, as @ (or this) is the window object.
This is not a bug per se, but perhaps a feature request & any help would be much appreciated.
I can put up a fork branch if that helps to illustrate the case.
Do you have any ideas on how to get this working with ember now that object proxying is deprecated in Ember 1.11.1? Because the setUnknownProperty does not work unless you are doing object proxying (using model.attribute
is now how you have to reference your attributes instead of doing object proxying by just using attrubute
). Or at least that is what I have been able to figure out. Maybe I'm wrong?
Hey,
I have a problem with autosaving, and defining a view for the controller which is being mixed in with the Ember.AutoSaving methods.
I have a working version, which uses {{render ...}} here: http://jsfiddle.net/nhemsley/eG4Yx/
and a version with basically just the view defined & called from within the index template, here: http://jsfiddle.net/nhemsley/sGtNG/
In the second example, the setUnknownProperty method is not ever called on the controller (I have overridden this method to console.log the events). So the model never gets saved.
Any thoughts on why this is is much appreciated. I'm not sure if it is my code, or something less obvious that is causing it to stop working.
Thanks
I'd like to refactor my app with ember decorators in anticipation with ember octane.
But Im unsure how to utilize this addon with native class components and such.
Is there a plan for this with ember-autosave?
Its cool that we can wrap a simple simple Ember.Object
:
base: Ember.computed({
get() {
return Ember.Object.create({
quantity: 10
});
}
}),
data: autosave('base', {
save(model) {
console.log('This should never happen');
}
}),
But then a set
on this will always trigger a save()
, which is not ideal. In the above example this will trigger an save
:
Ember.set(this, 'data.quantity', 10);
I think that the autosave proxy should check equality in setUnknownProperty
. Or is this an expected behaviour?
I hope I can communicate clearly what is going on.
I have the autosave proxy on an input with an initial value. I type, I wait, I saves. Great.
If I go backspace to the initial value and wait. I does not save, not does it change the value in emberdata as viewed in the ember chrome extension (I also printed it to the console, to make sure). I noticed that the setUnknownProperty
function is never called.
This might be the standard behaviour, but it catches me out, because the input show a value (the initial value) and the last modified value is actually saved.
It this as expected? Could you explain or point to a work-around? Thank you.
I can reproduce the behaviour changing the title of this repo's example app.
Hi there,
I've updated an app to Ember v3.4.3 and there seem to be an issue with autosave-proxy trying to import Ember from 'ember'
resulting in the following error:
Error: Could not find module `ember` imported from `ember-autosave/autosave-proxy`
Now that 3.4 is the official LTS, is there any plan to update ember-autosave?
Thanks! ❤️
Hello
I was able to reproduce this problem on a fresh ember 2.6 app.
Assume we have this code in a component/controlleR:
bar: Ember.computed({
get() {
return Ember.Object.create({value:10});
}
}),
foo: autosave('bar', {
save(model) {
console.log('save', model);
}
}),
And a template like this:
bar: {{bar.value}}<br />
foo: {{foo.value}}<br />
Then we see:
bar: 10
foo: 10
But now when we do something like this (for example in an actions):
set(get(this, 'bar'), 'value', 7);
We end up seeing this:
bar: 7
foo: 10
Btw, a simple get(this, 'foo.value')
will return the correct 7
. Just the template does not rerender.
When `safeSave()is called,
this.get('content.store').commit()``makes multiple requests. For example, if the user types "gas" into a bound textfield that is bound to a field of an``ObjectController``extended from``Ember.Autosaving``, it will make 3 requests to the backend. The first one with 'g', the second one with 'ga' and the third one with 'gas'.
I am not sure why Ember Data is doing that. Can anyone reproduce this?
A fix for me was to change _safeSet
to:
_safeSet: function(key, value) {
return this.get('_buffers').set(key, value);
},
i.e. always buffer the data and then simply flush and commit on `_deboncedSave``, as before. This works, but there might be issues if other parts of the app are dependend on the fields of the content. In that case they will not see the changes until the flush and save.
It would be preferable to have the store overwrite old changes with new ones and committing the final version, rather than a sequence of changes. Any ideas?
By default, all model properties should be buffered and cause debounced saves. Then, if bufferedFields
are specified, only those fields will have that functionality.
Hi there! I'm very excited about ember-autosave but am having issues getting it implemented correctly and was hoping for some insight into what's going wrong. I am using Ember 2.3.1 and ember-autosave 1.0.0, and trying to implement it for use with the TinyMCE text editor with a Rails API backend. I'd greatly appreciate any insight or even getting pointed in the right direction.
I'm calling autosave from the show-sheet component object, but the content is not saving and I'm also not hitting the debugger that I put in the save method:
// app/components/show-sheet.js
import Ember from 'ember';
import autosave from 'ember-autosave';
export default Ember.Component.extend({
store: Ember.inject.service(),
sheetProxy: autosave('sheet', {
save(sheet) {
debugger;
sheet.save();
}
})
});
It's not clear to me what exactly I've done wrong here and why I'm not able to hit the save method. (I also tried replace the last two calls of sheet with model
and had the same issue - not sure if I'm naming things incorrectly). Here's the component template:
text-editor
is also a component required by TinyMCE, and that looks like this:
This last template's syntax is required to remain the same by TinyMCE. I'm wondering if the issue I'm having is that the text area isn't being save because it is in a nested component or that TinyMCE doesn't play well with ember-autosave, or if I've done something else wrong in the setup that is preventing autosave from working? Thanks so much for the help!
Hi, I’m interested in this project but initially having some issues setting up a very basic implementation and not having much luck getting the demo to work either. I’m hoping someone can answer some general usage questions or provide any pointers as to what I’m doing wrong. I'd also be happy to take this question somewhere else if this isn't the right place for it.
I’m using Ember 1.13.11 and Ember-Autosave 1.0.0 (facing similar challenges using the 0.3.0 branch).
I have a component that has a model property ‘percent’ passed in from another component. I’d like this ‘percent’ to be set up to 'autosave'.
{{!templates/components/main-control.hbs }}
{{percent-control percent=percent}}
//components/percent-control.js
import Ember from ‘ember’;
import autosave from ‘ember-autosave’;
export default Ember.Component.extend({
...
percent: autosave(‘percent’),
...
On page load, I’m getting this:
Uncaught Error: Assertion Failed: You need to provide an object and key to ‘set’.
For whatever reason the “set” method in computedAutsave is getting called at a point in which “proxy” is undefined and throws the above error:
//computed-autosave.js
...
set: function(key, value, proxy){
set(proxy, 'content', value);
return proxy;
}
...
Perhaps my autosave 'percent' property can’t be assigned to a property with the same name as a prop that was passed into my percent-control component?
Testing this theory I modified my 'percent-control' component to:
export default Ember.Component.extend({
...
percentProxy: autosave(‘percent’),
...
This does bypass the above error that was being thrown, and the input's onchange event seems to re-render my component template, but it's not saving the model. Any ideas?
Have you by any chance been able to port this to Ember Data Beta 2 yet?
The section Using AutosaveProxy in the README shows an example where didReceiveAttrs
is implemented in a route.
As far as I know, didReceiveAttrs
is a component method. How is this intended to work? I think a clarification or a correction in the documentation would be good.
AutosaveProxy.create({ content: model })
. I've already overridden this so that it takes additional arguments. Might make a new name AutosaveProxy.wrap(model, config)
. This can avoid reserving content
. Related issue: #20save
function. This kind of thing is no longer conventionalnew AutosaveProxy(...)
vs AutosaveProxy.create(...)
good day, I use a proxy object and update an embedded readonly nested object. It does not save; I guess because the object reference has not changed. How do I trigger the save nonetheless?
Nervermind, I copied the object modified it and then set is back on the proxy.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.