from the sample/tutorials of knockout, all view/templates are in one page, is it possible to separate them in different files and pre-compile them. just like what ember framework do.
if yes, is there a sample ? better using handlebars or knockout native template engine.
thanks.
The guys from Cassette have found a solution to pre-compile Knockout JS templates: http://getcassette.net/documentation/v1/html-templates/knockoutjs-jquery-tmpl
But Cassette is an asset to build .NET web apps so this solution seems to work only for the .NET world.
There are a few different libraries for this, like
https://github.com/ifandelse/Knockout.js-External-Template-Engine
I have made my own too which uses a Convention approach
https://github.com/AndersMalmgren/Knockout.Bootstrap
Install-Package Knockout.Bootstrap
It needs a service to get the templates, once that is done you load templates like
this.bootstrap.loadView(model, this.view);
By convention if the model is sent in is named EditOrderViewModel it will load the View named EditOrderView
wiki
https://github.com/AndersMalmgren/Knockout.Bootstrap/wiki
Related
I'm on developing a ember-cli project where I have created many reusable components. I want these components in every template(hbs) file. I can do {{component1}} {{component2}} {{component3}} in each template but this looks redundant to me since I've to write all these lines in every template. All I want to know is if I can inject components in all the templates like way services are injected into routes, components etc where ever I need.
Example of how I inject services is below
/intializers/session-object.js
export function intialize (application){
application.inject('route','session','service:session');
application.inject('controller','session','service:session');
application.inject('component','session','service:session');
application.inject('adapter','session','service:session');
});
I tried injecting the components into templates as similar as above.
/intializers/session-object.js
export function intialize (application){
application.inject('template','my-component','component:my-component');
});
As expected, the above code fails. No where in the ember guides is mentioned that I can inject components in templates. But, wanted to know if anybody did this before.
I believe there could be a strong reason why ember is not allowing us to inject components into templates.
Any help in explaining the reason why this cannot be implemented in ember.js is great or providing a solution if it can be implemented is awesome. Thanks in advance guys.
Injecting to template is not meaningful.
You can create a partial template and put that common components there then use that partial.
-common.hbs
{{nav-bar}}
{{error-messages}}
another.hbs
{{partial 'path-to-common-template'}}
I'm learning to work with Ember and Grunt precompiled HBS templates, but want to also run in a 'developer mode' where the the App will compile the HBS's at runtime, if it doesn't find them.
I've read about a few ways to go about this and am trying to do it with '$.ajax()' and 'Ember.Handlebars.compile(data)' where each template returned is added to the Ember.TEMPLATES array. This won't work off the file system, so I test it on a localhost tomcat where the Ember App is added to webapps/ROOT.
I'm working with a demo 'user admin' App I found online which uses a couple of components, helpers and 'generated controllers'. So the Templates compile OK, but there are problems with Helper registration, such as:
Handlebars error: Could not find property 'modal-box' on object (generated modal-demo controller).
...so after adding the Component Template to the Templates array, I try to register it by name:
if (templateName == 'components/modal-box') {
Ember.Handlebars.helper('modal-box', function(value, options) {
var escaped = Handlebars.Utils.escapeExpression(value);
return new Handlebars.SafeString(tmpl);
});
}
...but then I get this new error:
registerBoundHelper-generated helpers do not support use with Handlebars blocks.
"Template was precompiled with an older version of Handlebars than the current runtime."
This is all done in an 'App create ready' function which iterates a list of template names, which I'd like to further develop to where it reads the template file names dynamically. The Grunt process also compacts the CSS and concatenates the scripts, so I would want to work out a 'developer mode' process for these too. But right now I'm focused on the HBS Templates & Components.
I'm thinking this must be a FAQ so am wondering if the community has arrived at a best practice for this sort of runtime compile for development?
If not how can I resolve my issue with getting the component template helper generated controllers registered correctly?
They just need to be registered before the other templates are compiled.
Em.TEMPLATES["components/cow-dude"] = Ember.Handlebars.compile("I'm a cow");
App = Ember.Application.create();
http://emberjs.jsbin.com/apIRef/28/edit
Order of operations is important, if it compiles the other templates first, they will just assume cow-dude is a property on the model in context (which will probably be undefined) (http://emberjs.jsbin.com/apIRef/27/edit). That being said, if you are going to lazy load componenets/helpers, those need to be loaded before any of their dependencies (Ember handles this all for you when you just toss them all in at once).
Additionally it sounds like you are using two different versions of Handlebars, which is why it's giving you the Template was precompiled with an older version of Handlebars than the current runtime.
I wrote up a similar response to someone else that might be of use to you: Ember.js with external handlebars template
I'm trying to use guard-handlebars to precompile my handlebars templates (to avoid having them all in my index.html, which feels slightly sub-optimal...). The precompilation works well, and Ember accepts the fact that the template accept when I inject it into Ember.TEMPLATES like this:
Ember.TEMPLATES['application'] = Handlebars.templates['application']
However, it doesn't work. I get an exception like this:
Could not find property 'outlet'
...in the Handlebars helperMissing method. It seems like Ember uses some monkey-patching of the default Handlebars stuff, supposedly adding support for the {{outlet}} helper and others. But my template does not seem to use these outlets. How do you work around this?
I'm using the handlebars compiler installed via NPM to compile the templates.
Found a duplicate question with a suggested solution/workaround: How can I consume handlebars command-line generated templates with Ember?
(short summary: yes, precompiling with the handlebars command line program does not work straight away, exactly because of the reason I am suggesting in the original question)
The plugin for you.
(Here's a sample integration: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences/blob/master/Gruntfile.js)
The guard-handlebars gem is pretty out of date, it was not designed to work with ember.
Today there are a few options.
barber with rake-pipeline
grunt-ember-templates
For example, to compile an ember template with barber try something like this:
compiled_template = Barber::Ember::FilePrecompiler.call(IO.read(file))
# now ruby variable compiled_template is a string like: "Ember.Handlebars.template(function(...));"
result = "Ember.TEMPLATES['#{name}'] = '#{compiled_template}';"
# now result is a JS string that sets Ember.TEMPLATES[name] to precompiled handlebars
When a new version of ember comes out it can take a few days to make it's way thru the ecosystem. When that happens you might find the ember-source gem helpful. See Alex's blog post for more detail:
http://alexmatchneer.com/blog/2013/02/27/gemifying-ember-dot-js-slash-handlebars-dot-js-slash-etc-dot-js/
How I can do to get the template Handlebars from file, like this:
App.ApplicationView = Ember.View.extend({templateName: 'templates/myTemplate1.handlebars'});
not from script:
< script type="text/x-handlebars" data-template-name="myTemplate1">
Update
I Will implement Ember-Brunch handlebars template pre-compiling
If you intend on assembling your finished application you can use something like rake-pipeline. This, of course, implies that you also need to use rake-pipeline during development.
If you do not want to assemble your templates, you can call Ember.TEMPLATES['templateName'] = Ember.Handlebars.compile('template content goes here') in your app. You can then separate these templates out to different files, which you will include in your index.html file.
Other than that I do not think there are other options. You could fetch your templates via an AJAX call and feed them into Ember.Handlebars.compile, but then you risk your templates being available too late in the application's lifecycle. Another option is to generate this on-the-fly on the server that delivers your Ember app, but you then most likely have to build-your-own solution.
Refer to the following for an application that uses the Ember.TEMPLATES[''] option: https://github.com/joachimhs/haagen-software.no/tree/master/app/
It is a little cumbersome, but you do get used to it...
There really isn't that many great options for this sort of functionality, and its not a whole lot Ember.js can do about it I'm afraid. .
I believe requirejs + require-handlebars-plugin does exactly what you need. You will have to convert your js application to use requirejs though, but that shouldn't be hard.
More info about requirejs: http://requirejs.org/
require-handlebars-plugin: https://github.com/SlexAxton/require-handlebars-plugin
I'm creating a DB web application with grails for my company and found myself in the need to change the default scaffolding templates.
So far so good, everything gets generated with the modified templates (controllers, views, ..).
Now, however, I get a request to create some "composite screens" with functionalities and a layout that differ from the overwritten templates.
So now my question is: is it possible in grails to create one or more templates (next the the default one) and pass this template name as an argument to the generate-* commands?
Thanks in advance!
EDIT: Adding the template name to the generate commands was just an idea, if it's possible to do this a different way, I'll be happy too.
Grails commands are scripts in grails/scripts. If you follow its logic you will see two things.
1) There is only one parameter passed to the script → domain.
2) Class for generating views is DefaultGrailsTemplateGenerator. You can analyse sourcecode and check what this class offers.
Update
Link to DefaultGrailsTemplateGenerator in GitHub.
I am not sure about the generate command parameters, but if you add another .gsp page into scaffolding directory, I believe it will try to run it through generation process.
So for example I used to have a show.gsp page as well as showBasic.gsp page, which showed fewer properties.