lol terrible with examples today
props: { userProfile: ['state', true, function () { return window.UserProfile; }] }
and then you could bind to it, and the events would register on both views
Is it possible to create an Ampersand model and add properties to it later on depending on a condition? For example, can I create a User model that extends AmpersandModel with a few properties, and then conditionally add more properties? If this is possible, how would I go about doing it?
Here is an example of what I am attempting. My JavaScript is a bit weak so I admit this might be completely loopy.
var AmpersandModel = require('ampersand-model');
var _ = require('lodash');
var sensor = require('Sensor');
var model = AmpersandModel.extend({
props: {
requestor_name: ['string', true, ''],
requestor_email: ['string', true, ''],
message: ['string', false, null],
enterprise: ['string', true, function() { return sensor.name(); }]
},
url: function() {
return '/api/sta';
}
});
if (sensor.name() === 'SomeValue') {
model = model.extend({
props: _.extend({}, model.prototype.props, {
requestor_phone: ['string', true, ''],
requestor_title: ['string', true, '']
})
});
}
module.exports = model;
@ScrumInsight well you are changing what the module exports based on whatever is in sensor. I think that logic should probably be in the constructor/initialize instead, but I think we need more background on what sensor does. Is there any reason why extraProperties wouldn't work here?
Hmmm.... @RickButler - I've continued to experiment. I've set extraProperties to allow. I only want certain properties to be "required" if certain conditions are true in the browser. My exact usage is that the application will be accessible from different urls (e.g. abc.scruminsight.com and xyz.scruminsight.com) and depending on the url used to access the application, different properties of the model need to be present/required. I will likewise be using a similar approach to dynamically create a form to collect the relevant information. Perhaps there is an easier way, but I was thinking of using this approach so that when the application is loaded, the model is configured on the client side and when the model is saved, the information is immediately accessible on the server side (there will be a single stateless server application running on a different virtual machine). I worry that because I am not a JS expert, nor an Ampersand expert, I might be missing an obvious design pattern.
@ScrumInsight if your API dictates the properties returned then extraProperties is probably the most flexible way. Define the props that everyone gets on the model. The additional properties will automatically get created by what the API returns. If you absolutely need concrete implementations of logic, you could create a base model and extend it based on each site, or come up with something more dynamic than you example.
@RickButler Okay - I understand how I would use extraProperties... Can I then set those new properties to be required and to have default values? My understanding is that when you set extraProperties to "allow", you can add properties at runtime to an instance of a model, but not to the overall class. In other words, the properties get created after you call new model();.
Maybe a better way to express my problem is that I want a single back-end which serves the application and in the browser, it configures forms and models dynamically based on information such as the url, the browser type, the time of day or anything else that is only known on the browser side. A silly example of this is a model that, when loaded on Safari, has an extra required property for the type of Apple device being used, but otherwise the property doesn't exist and is not required. The form that is displayed to the user also shows and validates this property (only in safari), and on all other browsers it is not displayed and not required.
There were plans for server side rendering initially, but I don't think anyone got around to it.
@smurfpandey
@smurfpandey your best bet is to either extended the object type and make it track changes on its props. A comparison algorithm, and then triggering the appropriate changes.
Be a pain to keep in sync*
and have it track changes
if that's what you want, you need a custom data type with an onchange property that does deep diffing on your object.
I'm wondering if there is anyone who can share a pattern or solution for creating an ampersand form where each field in the form is displayed one at a time with a progress bar and back/forward buttons? I can probably figure it out myself, but I'm guessing someone else has already done it :-)
@ScrumInsight form with all inputs hidden, in the view that contains the form you have a prop you use in a switch binding, next prev buttons change the prop and the switch shows the next input hides the others. There is more to it than that though, you are going to have to setup validation for the input before you move to next, and the last input will need to hide your next button and show the submit (or just run submit).
@ScrumInsight if it's not a lot of inputs/data I would do it so each input had it's own view/route, and you would store the data on the route. eg step one /signup
step 2 /signup/john-firstname
where john was the value from step 1
step 3 signup/john-firstname/smith-lastname
that way you can refresh the page and not lose your state.
Thanks @RickButler - there are about 100 fields which is why I want to have them show sequentially (it's a survey of sorts). But I also like the idea of the route - maybe I could generate that stuff programmatically so that each view is instantiated dynamically in an initialization loop of some sort. I assume that the views would need properties bound to the prev and next buttons in that case. It might be tough with the model though since the fields are all required. Hmmm....
But I'm not seeing the correct display for the glyph - just some weird circle character - anyone point me in the right direction - first time ampersand user ;->
I can see bootstrap.css in stylesheets but i'm not sure if that comes with the glyphs or I need to import them as a separate file?
but in chrome when accessing the page I am seeing 2 errors
Failed to decode downloaded font: http://localhost:3000/fonts/glyphicons-halflings-regular.ttf (and .woff)
as well as OTS parsing error: invalid version tag