Why creating model in any other location than client, meteor runtime throws exception? - meteor

I am a meteor newbie. I am trying out by building a simple app and it does nothing but shows list of items. I first tried out with hard coded model values in my client javascript code and it worked just fine. I then created a folder called 'model' under root of the application and created the model there like the following
Favorites = new Meteor.collection("favorites")
with this change, meteor throws exception pointing to this line of the file on load. If I move this code to client the code works ofcourse that is wrong. The full code is # https://github.com/ksunair/13favs It is a very simple solution has few files and less than 20 or 30 lines altogether. My client code is,
Template.favorites_main.helper({
favorites:Favorites
});

I did the following in order to clear your app of errors:
Favorites = new Meteor.Collection("favorites"); (Collection starts with a capital C)
I moved model/mainmodel.js to lib/mainmodel.js so Favorites would be available as soon as the template rendered. I always put my models under lib (or in a subdirectory) so they will be loaded first. This contradicts what I see in other places including discover meteor, so I'm unclear what the best practice is. In any case, it fixed the problem.
$ meteor add accounts-ui was needed because you referenced Accounts.ui.config.
You need to actually do a find in your favorites_main template. So it should look something like:
Template.favorites_main.helpers({
favorites: Favorites.find();
});

Related

How to use PrimeNG with Angular in aspnetcore-spa template

You know, I spend more time just trying to get things set up to work with Angular than I do actually developing with Angular. There must be an easier way... :(
Currently, I am using the aspnetcore-spa template, creating a project with the command "dotnet new angular" - this is version 1.0.3, which adds Angular 4.1.2 to the npm dependencies. This works great to get a project running quickly. But now I want to add PrimeNG to take advantage of their form controls. I have been struggling with this all day, and would love it if anyone could provide some assistance.
Here is what I have done in my current effort (the latest of many, starting fresh each time):
1) Added to the package.json file: "primeng": "4.1.0-rc.2"
2) Added 'primeng/primeng' to the webpack.config.vendor.js file's vendor collection.
3) Added the following to my test module (which is in turn referenced in app.module.shared.ts so I can route to it via my RouterModule):
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
And in the html for the module, in an attempt to use the file uploader control, I have (from their site - https://www.primefaces.org/primeng/#/fileupload):
<p-fileUpload name="myfile[]" url="./upload.php"></p-fileUpload>
4) ran "webpack --config webpack.config.vendor.js" from a command prompt at the root of the project folder, which completed with no errors.
Then I hit F5 to run the project, and I got this error:
Exception: Call to Node module failed with error: Error: Template parse errors:
'p-fileUpload' is not a known element:
1. If 'p-fileUpload' is an Angular component, then verify that it is part of this module.
2. If 'p-fileUpload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. (" type="button" (click)="onclick()" class="ui-button-info" label="Click Me">Click Me</button>-->
So, in an effort to comply, I added a reference to the ngprime module to the app.module.shared.ts file, like this (I don't really know how I should reference the module...):
import { FileUploadModule } from 'primeng/primeng';
But got the same exact error.
What am I missing???
Any help would be most appreciated.
I finally have this working, using the asp-prerender-module to get server-side rendering, and not having to rely on the asp-ng2-prerender-module (see my last comment). The trick, I found, was to reference the FileUploaderModule in the app.module.shared.ts file like this:
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
rather than like this:
import { FileUploadModule } from 'primeng/primeng';
The reason this matters is that the latter method of referencing will load all other components as well (see explanation here: https://www.primefaces.org/primeng/#/setup), and SOME of the PrimeNG components can not be rendered on the server due to DOM-related references (things like "window", which do not exist on the server). See the discussion here for more on this: https://github.com/primefaces/primeng/issues/1341
This change, combined with the other steps listed in my answer and, of course, actually referencing the directive in app.module (thank you #pankaj !) made everything work correctly at last. Only took me about 7 hours to figure it out. :(

Unity 5 NetUI - How do I fix this error?

This error message keeps showing everytime I test the game:
NullReferenceException: Object reference not set to an instance of an object
SetupLocalPlayer.Start () (at Assets/Scripts/SetupLocalPlayer.cs:12)
and I'm trying to figure out how to enable my Wheeldrive script when I am the local player (When I spawn in) and it doesn't seem to be working, The Network Id is on the player prefab but the controller script is on the Sedan gameobject, since the Network identity is on the player prefab the disable script also has to go on it, so I don't think the script is able to find the controller script since its not on the same Gameobject. (Picture Below)
Any help is really appreciated :)
The Project + Code Picture
If the SetupLocalPlayer script is on the player prefab, You should be able to find the WheelDrive component using GetComponentInChildren<WheelDrive>() instead of GetComponent<WheelDrive>() (in line 12 of the SetupLocalPlayer.cs file)
Because the WheelDrive component is not enabled, GetComponent is unable to find it. Thus GetComponent<WheelDrive>() returns null, and you get the error in the console.

Table methods not working anymore

I have a table with different methods, for example, one of them is validateWrite, when setting Field A to value X, Field B and C has to be filled in.
Suddenly (without changing code, I have compared the code with the test enviroment, it does work there) the validateWrite has stopped working.
I have tried to recompile the table, but that did not work.
Any idea why it suddenly (without making other modifications in this enviroment, or generating a CIL) stopped working and what i can try to solve it?
If some piece of code is calling table.doInsert(), it skips the validateWrite() method.
If the environments are truly identical, then I would try closing your AX client and deleting your user caches (see http://dynamics-ax-live.blogspot.com/2010/03/more-information-about-auc-file.html) where you delete all of the *.auc files located at C:\Users\[Username]\AppData\Local
In addition to what that tells you to delete, I'd also remove the *.kti file and all of the files & folders inside of C:\Users\[UserName]\AppData\Local\Microsoft\Dynamics Ax
Then open AX, see if the problem still exists. Then full system compile, CIL build, and delete your usage data.
The preferred route though would be to just drop a breakpoint in and debug the code to see what the execution stack is.

Meteor's Iron.Router adding an extra "/" to route names and not allowing home route

I am having a problem getting iron-router to correctly store and access routes. It appears that Iron.Router is adding an extra slash (/) before the route names, not ignoring case for template names, and not creating a default route.
I am adding Iron.Router to a simple testing app I have that I have split up for separate pages, but I cannot get any page to work as documented either with the map() or route() functions. I have spent hours trying options and searching and I seem to be the only one who ever had this problem. So I set up a minimum project to test. I created a new meteor project, removed the files, then copied basic.js and basic.html from https://github.com/EventedMind/iron-router/tree/devel/examples. All this example does is show three pages when you click between them. I then…
vagrant#precise32:/vagrant/test$ meteor add iron:router
vagrant#precise32:/vagrant/test$ meteor update
This project is already at Meteor 0.9.3.1, the latest release.
Your packages are at their latest compatible versions.
vagrant#precise32:/vagrant/test$ npm version
{ http_parser: '1.0',
node: '0.10.32',
v8: '3.14.5.9',
ares: '1.9.0-DEV',
uv: '0.10.28',
zlib: '1.2.3',
modules: '11',
openssl: '1.0.1i',
npm: '2.1.2' }
vagrant#precise32:/vagrant/test$ ls
basic.html basic.js.
vagrant#precise32:/vagrant/test$ meteor
It started successfully, but threw a JS error on in Chrome (or FF). Exception from Tracker recompute function: Error: Couldn't find a template named "/" or "". Are you sure you defined it? Well yes, I did. Giving the route a blank name generates no error and no home page. So next I tried adding “/one” on the URL. I then get the JS error Error: Oh no! No route found for path: "/one". Next I changed the parameter in my route() call from “/one” to “one” and got this error: Error: Couldn't find a template named “one” or “one”. Are you sure you defined it? I then tried adding explicit code for route “one”: “function() { this.render(“Home”)} to reference the template “Home” using the same case. I got the exact same error message as without the explicit code. The only way I could get page one to display was to changed the name from “One” to “one” in the HTML. I couldn't get the default page to display at all.
When poking around (using Chrome’s console) in some internal variables, I found Router.routes, which has this highly suspicious content:
>Router.routes.forEach( function(v) {console.info("name = '%s', originalPath = '%s', re = '%s'",v.name,v.originalPath,v.re)})
2014-10-04 16:10:07.756 name = '/', originalPath = '//', re = '/^//?$/i'
2014-10-04 16:10:07.757 name = '/one', originalPath = '//one', re = '/^//one/?$/i'
2014-10-04 16:10:07.758 name = '/two', originalPath = '//two', re = '/^//two/?$/i'
(If I name the path "one", then the route will show 'one' as the name, and '/one' as the originalPath.
Details: This is a brand new folder with only these two files in it (and the hidden .meteor folder). The only package added was “iron:router”. I did a meteor update just before my last round of testing (one hour ago). I have set no environment variables. I have the latest version of Chrome & FireFox. I am using VirtualBox via Vagrant from Window 8 with 12G memory. Every other Meteor project I’ve done so far works, (well except for some trying to use jQuery).
If this was a bug in Iron:router, someone else would have noticed, but there are no more settings I can find anywhere that could be adding or subtracting the extra “/” in Iron-Router. Anyone have any ideas of what I need to look for for making a vanilla Iron-Router work with a vanilla Meteor project on my machine?
You are really out of luck because your problem is very simple : you are running examples which are intended to work with the LATEST iron:router#1.0.0-pre3, but your iron:router version is most likely 0.9.4.
Try this :
meteor remove iron:router
meteor add iron:router#1.0.0-pre3
If you want a little more insight, routes used to be declared with name first and path as an option, this is now the contrary.
0.9.4
Router.map(function(){
this.route("home",{
path:"/"
});
});
1.0.0-pre3
Router.route("/",{
name:"home"
});

Meteor how to save templates in mongo

I want to give my users the possibility to create document templates (contracts, emails, etc.)
The best option I figured out would be to store these document templates in mongo (maybe I'm wrong...)
I've been searching for a couple of hours now but I can't figure out how to render these document template with their data context.
Example:
Template stored in Mongo: "Dear {{firstname}}"
data context: {firstname: "Tom"}
On Tom's website, He should read: "Dear Tom"
How can I do this?
EDIT
After some researches, I discovered a package called spacebars-compiler that brings the option to compile to the client:
meteor add spacebars-compiler
I then tried something like this:
Template.doctypesList.rendered = ->
content = "<div>" + this.data.content + "</div>"
template = Spacebars.compile content
rendered = UI.dynamic(template,{name:"nicolas"})
UI.insert(rendered, $(this).closest(".widget-body"))
but it doesn't work.
the template gets compiled but then, I don't know how to interpret it with its data context and to send it back to the web page.
EDIT 2
I'm getting closer thanks to Tom.
This is what I did:
Template.doctypesList.rendered = ->
content = this.data.content
console.log content
templateName = "template_#{this.data._id}"
Template.__define__(templateName, () -> content)
rendered = UI.renderWithData(eval("Template.#{templateName}"),{name:"nicolas"})
UI.insert(rendered, $("#content_" + this.data._id).get(0))
This works excepted the fact that the name is not injected into the template. UI.renderWithData renders the template but without the data context...
The thing your are missing is the call to (undocumented!) Template.__define__ which requires the template name (pick something unique and clever) as the first argument and the render function which you get from your space bars compiler. When it is done you can use {{> UI.dynamic}} as #Slava suggested.
There is also another way to do it, by using UI.Component API, but I guess it's pretty unstable at the moment, so maybe I will skip this, at least for now.
Use UI.dynamic: https://www.discovermeteor.com/blog/blaze-dynamic-template-includes/
It is fairly new and didn't make its way to docs for some reason.
There are few ways to achieve what you want, but I would do it like this:
You're probably already using underscore.js, if not Meteor has core package for it.
You could use underscore templates (http://underscorejs.org/#template) like this:
var templateString = 'Dear <%= firstname %>'
and later compile it using
_.template(templateString, {firstname: "Tom"})
to get Dear Tom.
Of course you can store templateString in MongoDB in the meantime.
You can set delimiters to whatever you want, <%= %> is just the default.
Compiled template is essentially htmljs notation Meteor uses (or so I suppose) and it uses Template.template_name.lookup to render correct data. Check in console if Template.template_name.lookup("data_helper")() returns the correct data.
I recently had to solve this exact (or similar) problem of compiling templates client side. You need to make sure the order of things is like this:
Compiled template is present on client
Template data is present (verify with Template.template_name.lookup("data_name")() )
Render the template on page now
To compile the template, as #apendua have suggested, use (this is how I use it and it works for me)
Template.__define__(name, eval(Spacebars.compile(
newHtml, {
isTemplate: true,
sourceName: 'Template "' + name + '"'
}
)));
After this you need to make sure the data you want to render in template is available before you actually render the template on page. This is what I use for rendering template on page:
UI.DomRange.insert(UI.render(Template.template_name).dom, document.body);
Although my use case for rendering templates client side is somewhat different (my task was to live update the changed template overriding meteor's hot code push), but this worked best among different methods of rendering the template.
You can check my very early stage package which does this here: https://github.com/channikhabra/meteor-live-update/blob/master/js/live-update.js
I am fairly new to real-world programming so my code might be ugly, but may be it'll give you some pointers to solve your problem. (If you find me doing something stupid in there, or see something which is better done some other way, please feel free to drop a comment. That's the only way I get feedback for improvement as I am new and essentially code alone sitting in my dark corner).

Resources