I want to update the data source json via
hot = new Handsontable(container,
.....
in somewhere in the code:
hot.getData().push({/*...*/ });
I want to redraw the hot in html-page after this line. How to force do it?
There are a few ways of doing what you're asking. Here I present two of them, pulled almost straight out of the documentation page.
The first is using the loadData function:
loadData (data: Array)
Reset all cells in the grid to contain data from the data array
This one is self explanatory. The thing with it is that it will trigger hot.render() automatically, as well as a few other events (like afterChange).
If you didn't want to do that, you can use the second method which is more "raw". This one involves basic javascripts principles. Handsontable is initialized with a reference to your data object. If you were to mutate this object, and then render, it would be the same as using loadData but without triggering the events.
Related
After reading the docs, this is my understanding of sync.
I instantiate some Backbone.Model and call Collection.create(). create() eventually calls sync() and the Model is POSTed to the server. Then there is a sync in the opposite direction such that the Model on the client is given an id.
Does this update then trigger componentDidUpdate()?
Note: componentDidUpdate is a ReactJS thing, so if that doesn't make sense, the question reduces to "Is the client-side model updated and the view re-rendered?"
Since inside of my componentDidUpdate() I am making a call to save() to keep everything up to date, this subsequently makes a call to sync() which then fires a PUT request (because the Model already has an id).
I'm asking, because in my current application, creating a TodoItem seems to result in a POST and then a PUT which I find redundant. Perhaps it is for an unrelated reason.
It actually fires two POSTS and then two PUTS when adding one item, but that is another question.
The first time you save a model (one which doesn't have an id) it will make a POST, thereafter it will make a PUT (update). I think you are confusing when to use create/add/save:
Use save at any point to save the current client collection/model state to the server
Use add to add Model(s) to a collection (a single Model, an array of Models, or an array of objects which contain attributes and let the collection create them)
Use create as a shorthand for creating a model, adding it to the collection, and syncing the collection to the server.
My guess is that you are calling create and save in one operation - you should be using add and save instead, or just create.
The view will not automatically update for you, you will need to listen to changes or events on the collection/model and update the view yourself - there is no equivalent of componentDidUpdate. For example:
initialize: function() {
this.listenTo(this.collection, 'sync', this.onCollectionSync);
},
onCollectionSync: function() {
this.render();
}
First of all I know how to set a LoadingMask for a component but have a problem with the uncoupling of the system I am making so I am just looking for a hint/idea.
I am using a MVVC architecture and in the View I have a Container with several Components in it, one of which is a Grid.Panel. The grid is bound to a store and has an event that when fired calls a method of the store. The following code happens in the ViewController:
functionForEvent() {
var store = getStoreForThisGrid();
store.update(Ext.getBody());
}
What happens now is the update() method makes a request to a server, that updates the store itself and the view component, and I need the loading mask during that time. How I handle the situation right now is I pass Ext.getBody() (or a DOM Element representation of a specific component) to the method and it deals with that reference. This function part of the store that is attached to the Grid and resides in the Store:
update : function (el) {
el.mask();
makeRequest();
el.unmask();
}
What I am looking for is another way (Pattern maybe if such exists for JavaScript) to access the View component from the Store instead of passing it around because that does not seem like a good practice and couples the system.
Since I come from a Java background I would have used the Observer pattern but cannot find how to apply this in JS.
I have a long running template helper. It relies on three separate collections and performs a lot of looping to pivot some data for daily reports. The users are okay with it being long running, but I need to give them feedback that the client is busy calculating what will be rendered to the UI. The problem for me is that using the waitOn hook only gets me part way there and the rendered callback doesn't work unless I am adding a new row to the template (which is almost never). In fact, I wonder if the Meteor team realize this. It seems like a feature that would be nice to have. I have a table with a the same number of rows and columns, but the values in the cells change. How can I show the users some feedback while the JS to calculate those cells runs?
The Meteor way would be to use a reactive variable:
HTML
<template name="busy">
{{#if processing}}
spinner
{{else}}
Done, showing results: ...
{{/if}}
</template>
JS
var data = new ReactiveDict();
Template.busy.rendered = function() {
data.set('processing', true);
};
Template.busy.processing = function() {
return data.get('processing');
};
var processing = function() {
...
// Looooong calculations
...
// Or even async
...
data.set('processing', false);
};
I have had a similar issue. I had to show an indication when a table is updated. I observed the query (check Collection.observeChanges) and ran a jQuery-powered flash on the row.
In your case, it seems like you are doing the compuation on your own and supply it to the Template as a variable. Put a spinner in the original template and at the end of your computation hide it with jQuery.
OK, so the key was twofold. I needed to purposely delay the "Loading" feedback I was providing. I presume that is so that it was called after the updating elements were actually finished rendering. I used the underscore delay function like so:
_.delay removeUpdating, 500
removeUpdating just removes a class on each table cell 'updating'.
And then at the beginning of this same helper method I add those classes to all the cells.
The delay coupled with a nice CSS3 background animation gives the user a nice cue that the fields are updating when they navigate!
I'd prefer not to be adding a delay manually, nor using jQuery to add and remove classes, so any better suggestions are appreciated!
I'm using dojo 1.9 and gridx. The grid is initialized with memory store. But when the data have changed, I update the store but I see no changes applied to grid. It has no refresh() method (like dgrid). However, I've found the following sequence:
grid.model.clearCache();
grid.model.setStore(store)
grid.body.refresh()
It causes the grid to display Loading... message, but nothing more happens.
However, paginator shows the correct number of pages, only the grid container is not rendering the rows.
The example with filters /gridx/tests/test_grid_filter.html from the gridx sources has the same problem: Loading... message, but no data.
So the first question is, is it a bug? If it's not a bug, how should I then tell the grid that the data has changed and it should be reloaded?
My previous answer works, and judging from upvotes it was useful for other, but I've found much simpler way, that doesn't require to re-create the store:
grid.model.clearCache();
grid.model.store.setData(items)
grid.body.refresh()
The key operations is clearing the cache, setting new items, and forcing the refresh of browser.
The confusing thing is, that GridX has 'store' property, but it is not the object that is used to present the data. The actual object is the store that is set on the model, so this is the object you need to modify.
The Loading... message was caused by the way I've declared the Grid. I've specified the columns property, the structure needs to be declared, in first line.
The refresh sequence is too short. You need also to re-creade the data store:
var storeData = {
identifier: 'id',
items: response.items
};
grid.model.clearCache();
storeData.items = data.result
store = new Memory({data: storeData});
grid.model.setStore(store)
grid.body.refresh()
Perhaps this seems a bit backwards, but I have a view bound with Rivets.js for which I'd like the view to populate the model on initialization.
The usecase is that I'm using server-side rendering to return a snippet (the view) including rivets' data-attributes. So NO JSON is returned from server to client.
Now, by pressing 'edit' a user may put the content in 'edit'-mode, and start editing at will. (Using contenteditable, but this is out of scope here I guess).
So how to make sure the model is populated with values from the view on init?
I know that this question is a little outdated but I recentry tried rivets and I came across the same problem.
The solution:
// In your rivets configuration you disable preload:
rivets.configure({
templateDelimiters: ['[[', ']]'],
preloadData: false
});
// you bind your data
var binding = rivets.bind($('#auction'), {auction: auction});
// you manually publish it once to populate your model with form's data
binding.publish();
And that's it. I still don't know how to disable prelaod per bind
From the example on Rivets website (assign to 'rivetBinding')
var view = rivets.bind($('#auction'), {auction: auction});
doing rivetBinding.publish(); will bootstrap the model with values from the view for all bindings that have 'publishes = true'.
This question is old but it still has no accepted answer, so here goes:
You need to disable the preload configuration so rivets doesn't override whatever is in the input with what you have in your model at the time you do the binding. This can be done via the preloadData=false configuration, either globally (rivets.configure(...)) or view-scoped (third param to rivets.bind(...)).
After the binding, you need to publish the view (pull the values to your model). You also need to set up the observers via sync() call, otherwise your binded methods won't be triggered.
Using the same example as the previous answers:
var view = rivets.bind($('#auction'), { auction: auction }, {
preloadData: false
});
view.publish();
view.sync();