I'm trying to represent multiple selects with its selected values from backend JSON to knockout view model.
And it's needed to retrieve this JSON when each select is changed, first time - all is ok, but if I apply mapping again (ko.mapping.fromJS(test_data, ViewModel)), all subscriptions are lost does anyone know how to avoid this situation?
jsfiddle (I don't know why selects don't have its values, without jsfiddle - all is ok):
http://jsfiddle.net/0bww2apv/2/
$(ViewModel.attributes()).each(function(index, attribute) {
attribute.attribute_value.subscribe(function(name) {
console.log('SUBSCRIBE', name);
var send_data = {};
$(ViewModel.attributes()).each(function (index, attribute) {
send_data[attribute.attribute_name.peek()] = attribute.attribute_value.peek();
if (attribute.attribute_value() === null) {
send_data = null;
return false;
}
});
if (send_data) {
console.log('REQUEST TO BACKEND: ', ko.toJSON(send_data));
ko.mapping.fromJS(test_data, ViewModel);
// subscriptions is lost here !
}
});
});
At last I've solved my own question with knockout.reactor plugin,
If we remove all auxiliary constructions, it will look like:
var ViewModel = ko.mapping.fromJS(test_data);
ko.applyBindings(ViewModel);
ko.watch(ViewModel, { depth: -1 }, function(parents, child, item) {
// here we need to filter watches and update only when needed, see jsfiddle
ko.mapping.fromJS(test_data2, {}, ViewModel);
});
This way we update selects and don't have troubles with subscription recursions.
full version (see console output for details): http://jsfiddle.net/r7Lo7502/
Related
I need your help or suggestion regarding my refresh function. I have this button called refresh that when clicked it will refresh (rearrange the data sorting based on createdAt field). I have been battling for days trying to get this correctly by resubscribing which i am not sure if it is the correct way or not.
Is there a correct way to resubscribe or re-sorting an a collection on the client when button clicked? Thanks a lot.
Yes, you can do this with following steps:
Pass the sorting type(asc or desc) into router query.
Update the subscribe sorting of server.
You need to also also update your client side find() methods sort, because when data does not change or few document get updated by your re-subscription, SO the oldest data will always come at first.
You can subscribe or re-subscribe collection on either router level or template level. If you are using Flow Rotuer then your re-subscribe will not work simply because flow router is not reactive. I prefer to use subscription at template level. Using Iron router query.
Here is the code sample :
Templete.templeteName.onRendered(function(){
this.autorun(function(){
var sort = {};
if(!Router.current().params.query || Router.current().params.query.sortType == 1 ) {
sort.createdAt = 1;
} else {
sort.createdAt = -1;
}
//You can use this handle to show/hide loader.
var handle = Meteor.Subscribe('subscriptionName', sort);
})
})
Templete.templeteName.helpers({
'data' : function(){
var sort = {};
if(!Router.current().params.query || Router.current().params.query == 1 ) {
sort.createdAt = 1;
} else {
sort.createdAt = -1;
}
return collection.find({},{sort:sort});
}
});
Templete.templeteName.events({
'click .refresh' : function(){
var sortType = value //get the value -1 or 1 from html.
Router.go('routeNaem',{},{query:{sortType:sortType}})
}
});
The ultimate goal is to detect changes between an existing Parse object and the incoming update using the beforeSave function in Cloud Code.
From the Cloud Code log available through parse.com, one can see the input to beforeSave contains a field called original and another one called update.
Cloud Code log:
Input: {"original": { ... }, "update":{...}
I wonder if, and how, we can access the original field in order to detect changing fields before saving.
Note that I've already tried several approaches for solving this without success:
using (object).changedAttributes()
using (object).previousAttributes()
fetching the existing object, before updating it with the new data
Note on request.object.changedAttributes():
returns false when using in beforeSave and afterSave -- see below for more details:
Log for before_save -- summarised for readability:
Input: { original: {units: '10'}, update: {units: '11'} }
Result: Update changed to { units: '11' }
[timestamp] false <--- console.log(request.object.changedAttributes())
Log for corresponding after_save:
[timestamp] false <--- console.log(request.object.changedAttributes())
There is a problem with changedAttributes(). It seems to answer false all the time -- or at least in beforeSave, where it would reasonably be needed. (See here, as well as other similar posts)
Here's a general purpose work-around to do what changedAttributes ought to do.
// use underscore for _.map() since its great to have underscore anyway
// or use JS map if you prefer...
var _ = require('underscore');
function changesOn(object, klass) {
var query = new Parse.Query(klass);
return query.get(object.id).then(function(savedObject) {
return _.map(object.dirtyKeys(), function(key) {
return { oldValue: savedObject.get(key), newValue: object.get(key) }
});
});
}
// my mre beforeSave looks like this
Parse.Cloud.beforeSave("Dummy", function(request, response) {
var object = request.object;
var changedAttributes = object.changedAttributes();
console.log("changed attributes = " + JSON.stringify(changedAttributes)); // null indeed!
changesOn(object, "Dummy").then(function(changes) {
console.log("DIY changed attributes = " + JSON.stringify(changes));
response.success();
}, function(error) {
response.error(error);
});
});
When I change someAttribute (a number column on a Dummy instance) from 32 to 1222 via client code or data browser, the log shows this:
I2015-06-30T20:22:39.886Z]changed attributes = false
I2015-06-30T20:22:39.988Z]DIY changed attributes =
[{"oldValue":32,"newValue":1222}]
Let me explain my issue, I am trying to populate Ember.Select directly from database.
I have these routes:
this.resource('twod', function() {
this.resource('twoduser', {
path : ':user_id'
});
});
In twoduser, I am displaying a full information about a single user. In that view, I have a Select Box as well, which end user will select and then with a button, he can add the user to a team that he selected from Ember.Select.
I tried to do this,
App.TwoduserController = Ember.ArrayController.extend({
selectedTeam : null,
team : function (){
var teams = [];
$.ajax({
type : "GET",
url : "http://pioneerdev.us/users/getTeamNames",
data : data,
success : function (data){
for (var i = 0; i < data.length; i ++){
var teamNames = data[i];
teams.push(teamNames);
}
}
});
return teams;
}.property()
})
Then in my index.html:
{{view Ember.Select
contentBinding="team"
optionValuePath="teams.team_name"
optionLabelPath="teams.team_name"
selectionBinding="selectedTeam"
prompt="Please Select a Team"}}
But when I do this, for some reason it interferes with Twoduser and I am not able to view the single user.
Furthermore, here's a sample JSON response I will get through the url:
{"teams":[{"team_name":"Toronto Maple Leafs"},{"team_name":"Vancouver Canuck"}]}
Moreover, I am fetching all users using Ajax like this:
App.Twod.reopenClass({
findAll : function() {
return new Ember.RSVP.Promise(function(resolve, reject) {
$.getJSON("http://pioneerdev.us/users/index", function(data) {
var result = data.users.map(function(row) {
return App.Twod.create(row);
});
resolve(result);
}).fail(reject);
});
},
findBy : function(user_id) {
return new Ember.RSVP.Promise(function(resolve, reject) {
var user = App.Twod.create();
$.getJSON("http://pioneerdev.us/users/byId/" + user_id, function(data) {
var result = user.setProperties(data.user);
resolve(result);
}).fail(reject);
});
}
});
Though there's one thing, I have a separate Teams route:
this.resource('teamview', function(){
this.resource('teamviewdetail', {
path : ':team_id'
});
});
Which shows all the teams and a single team when you click on a single team.
Can I use that TeamviewController? or Can I fetch team names from Twoduser Controller and push names to the array as I mentioned before?
More Information:
If I use the way I mentioned, I get this error:
Uncaught TypeError: Object [object Object] has no method 'addArrayObserver'
Here's a working jsfiddle on the issue I am experiencing. You can select "Storyboard" from the Designation & then select the user. That will reproduce the issue.
One more Update: Seems using ObjectController instead of ArrayController issue solves the addArrayObserver issue. But still I can't get the teams in the Ember.Select.
The biggest issue here is that you use Array#push instead of pushObject. Ember needs the special methods in order to be aware of changes. Otherwise, it will continue to think that the array of teams is as empty as when you first returned it. Second biggest issue is that your ajax success call isn't accessing the returned data properly.
Also, optionValuePath and optionLabelPath are relative to the individual select option view, so they should start with content, which is the individual item as set on the view. So: content.team_name
Is it possible to automatically run populate() for referenced subdocuments for a particular model?
I have a City model that has referenced Region and Country documents that I would like to be automatically populated when a city/cities are fetched.
Well, there aren't docs for this in the Mongoose website; what I do is something like this:
schema.statics.createQuery = function( populates ) {
var query = this.find();
populates.forEach(function( p ) {
query.populate( p );
});
return query;
};
Of course, there is validation and some other stuff in this method, but essentially it's what I do with my models.
In your case, you could hard code the populates in such a method, if you strictly need them in every find call.
AFAIK there's no way to auto-populate all references to another model out of the box (there are plugins though). In a similar fashion to #gustavohenke's answer you can use a static, along with a small change to your find query.
Here's what I'd do:
citySchema.statics.fieldsToPopulate = function() {
return ['regionField', 'countryField'];
};
Where regionField and countryField are the fields which reference the models Region and Country respectively.
Then in your query you could populate accordingly:
var populate = city.fieldsToPopulate ? city.fieldsToPopulate() : [];
city.findById(id)
.populate(populate)
.exec(function(err, data) {
if (err) {
return next(err);
} else {
res.render('template', { city: data });
}
});
I would like to make a collection of all elements that are selected and not.
The dom element consists of several multiple select.
Each of them have the same users.
My goal is to create a collection of all users and for the user which are selected add an attribute with a specific value.
Here is my code js code (1) and here is the link http://jsfiddle.net/vxRtb/9/.
My code works, but I would like to dry the code because, maybe, lopping just on the first select to get all the user is not required.
Any hints how to dry the following js code?
Please read the comments on the js code for more info; thanks
P.S.:
1) I am using jQuery and underscore
2) From the server I get the html code, the same as in jsfiddle.net/vxRtb/9
$(function () {
var $selectElements = $('form .controls select');
var userCollection = [];
// Subroutine_1
// TODO Subroutine_1 and Subroutine_2 seems too close; any idea how to dry this code?
$.each($($selectElements[0]), function (i, teamElement) {
var $users = $(teamElement).find('option')
$.each($users, function (i, user) {
userCollection.push({
id: $(user).val(),
name: $(user).text(),
});
});
});
// Subroutine_2
$.each($selectElements, function (i, teamElement) {
var $teamElement = $(teamElement);
//var teamId = $teamElement.attr('id');
var teamName = $teamElement
.parent().parent().closest('.controls')
.find('input').val();
var $users = $teamElement.find('option:selected');
$.each($users, function (i, user) {
_.where(userCollection, {id: $(user).val()})[0].team = teamName;
});
});
console.log(userCollection);
});
This is a fairly old question and you've probably moved on from it, however, I took a try at this and here's what I came up with.
Analysis
The loops are very similar with the key difference of one loop builds up the team members and the other loop figures out their team. I think the DRY option is to only use one loop and test if a member has a team or not. There will be repetition as the user id's are non-unique, so some logic needs to be applied.
Pseudo Code
Create User Object Collection based off of the <option> tag.
Use getMyTeam to generate the team name
Group the User Objects by ID.
Filter User Objects taking only those with a team names
Filter User Objects without team names to show only uniq records
Code
I'm not sure if this is any better. Performance-wise, this should be fairly poor due to all the nesting. However, I guess the advantage is that the code becomes much more modular and you can easily change the rules if needed. jsFiddle
$(function () {
// Helper to find a team based on an options element
function getMyTeam() {
if (this.is(':selected')) {
var select = this.parent();
var teamId = select.attr('id').replace(/_participations$/, '_name');
return $('#' + teamId).val();
}
return undefined;
};
// Helper to return an object's id
function getId(obj) {
return obj.id;
};
// Helper to filter the team members by team name.
function filterMembersByTeam(members) {
var result = _.filter(members, function(record) {
return !_.isUndefined(record['team']);
});
if (result.length === 0) {
result = _.uniq(members, true, function(member) {
return JSON.stringify(member);
})
};
return result;
};
// 1. Select the users
var options = $('form .controls select option');
// 2. Build up the user data
var userCollection = _.map(options,
function(option) {
return {
id: $(option).val(),
name: $(option).text(),
team: getMyTeam.apply($(option))
};
});
// 3. Clean & filter the user data
userCollection =
_.flatten(
_.map( _.groupBy(userCollection, getId), filterMembersByTeam)
);
console.log(userCollection);
});