I have a table that displays a collection of models that looks roughly like this:
{
id: 1,
name: "Product",
category: {
id: 1,
name: "CategoryName"
},
{
id: 2,
name: "Another Product",
category: {
id: 1,
name: "CategoryName"
},
etc..
I can select a model from the table and perform an edit on its attributes in a modal. After I finish editing attributes I call save, close the modal and pass an event to refresh my table. In my table view I recieve an event and call fetch with update: true
App.vent.on("refresh:products", function() {
return this.collection.fetch()({
update: true
});
});
However none of the nested attributes, in this case category, get updated without a hard refresh. How I can fix this? Thanks!
try passing reset:true as options to fetch
App.vent.on("refresh:products", function() {
return this.collection.fetch()({
reset: true
});
});
This will stop backbone from merging the data received from the server.
Related
Lets say I have the following list in data:
data: {
todos: [
{ id: 1, title: "Learn Python" },
{ id: 2, title: "Learn JS" },
{ id: 3, title: "Create WebApp" }
]
}
Now I want to pass only the entry with id of 2 to the prop:
<dynamic-prop :id=todos[2] :title="todos.title"> </dynamic-prop>
Is something like that possible in Vue?
Sure, you can pass any data on. Just don't forget to add quotation marks and mind the off-by-one problem. So if you want to pass the second element in a (zero-indexed) array, you'd write something like:
<dynamic-prop :id="todos[1].id" :title="todos[1].title"> </dynamic-prop>
I am trying to implement the "RowSelectors" feature on the iggrid, but it will not change to a the next row.
On further inspection, i have got the selected row method and each row shows the same id. I am returning my data via ajax, if i use static json in a variable and use that as a datasource, it works as expected so not sure what the issue is..
$("#selector").igGrid("selectedRow");
I can only acheive a row change when holding control and clicking..
Object {element: n.fn.init(1), index: 0, id: 3407751001}
then next row is
Object {element: n.fn.init(1), index: 1, id: 3407751001}
Settings..
features: [
{
name: "Sorting",
columnSettings: [
{
columnIndex: 4,
allowSorting: true,
firstSortDirection: "ascending",
currentSortDirection: "descending"
}
]
},
{
name: 'RowSelectors',
enableCheckBoxes: true,
checkBoxStateChanging: function (ui, args) {
return false;
},
multipleSelection: true,
rowSelectorClicked: function (evt, ui) {
// Handle event
},
},
{
name: 'Selection'
}
]
The issue is already resolved, but I'm adding the answer so it doesn't stay unanswered.
The primaryKey column the igGrid uses needs to be a column with unique identifiers for each record.
When I remove a comment on my HTML var {{selecionados}} selected from, and I click on the list of names is all fine, but when HTML retreat or comment on again no longer works.
<script async src="//jsfiddle.net/raphaelscunha/9cwztvzv/1/embed/"></script>
Vue.js will only update your view when a property within the data object is changed, not when a new property is added. (See Change Detection Caveats in the Vue.js guide)
If you want it to react when ativo is set to true, make sure the property exists beforehand.
Try something like this when you're initializing your Vue object:
atores: [
{ name: 'Chuck Norris', ativo: false},
{ name: 'Bruce Lee', ativo: false },
{ name: 'Jackie Chan', ativo: false },
{ name: 'Jet Li', ativo: false}
]
JSFiddle
I have successfully implement type ahead using angular js using this codepen.
Now my data is dynamic so I want to create my own json that should looks something like following:
$scope.states = [
{
name: "ABCD",
id: "AB"
},
{
name: "XYZ",
id: "XY"
},
{
name: "OPQR",
id: "OP"
},
{
name: "LMNO",
id: "LM"
},
{
name: "KLM",
id: "KL"
}
];
How to create like above json and store in $scope variable so I can access it using name and id separately.
Please help me...!!
I am giving by my own now cause I got it little bit late.
Solution is I have pushed the data wrong I have solved it like:
$scope.states.push({
name: "string",
id: int,
});
and I got it.
I have a Kendo UI Grid bound to a local data source. If I make some changes and click on "Save changes", and then I click on "Cancel changes", the changes are rolled back. I expected them to be "locked in" because I saved them.
Furthermore, if I make a change, save it, make another change, save again and finally cancel, both changes are rolled back.
See UPDATED fiddle, with problem and solution:
http://jsfiddle.net/q24ennne/7/
My HTML:
<div id="grid"></div>
My JavaScript:
window.gridData = [
{ id: 1, text: "Uno" },
{ id: 2, text: "Dos" },
{ id: 3, text: "Tres" },
{ id: 14, text: "Catorce" },
];
(function() {
$('#grid').kendoGrid({
toolbar: ["save", "cancel"],
editable: true,
saveChanges: function(e) {
gridData = $('#grid').getKendoGrid().dataSource.data();
$('#grid').getKendoGrid().refresh();
console.log("gridData:");
console.log(gridData);
},
columns: [{
field: "text",
title: "No."
}],
dataSource: {
data: gridData,
}
});
})();
Thanks!
You need to include a schema for your datasource that specifies which property is the id of each item. In your case this happens to also be called "id" so add this:
dataSource: {
data: gridData,
schema: {
model: { id: "id" }
}
}
The grid will then correctly track and keep your saved changes.