I need to use an external file with content from an XTemplate.
Basically, I want to use the an external file with no "strange" solution, like use "XTemplate.from", or put the XTemplate objects in variables. Something like this:
list.html
<div>Name: #{object.name} </div>
file.js
...
content = Ext.create('Ext.panel.Panel', {
fullscreen: true,
scroll: 'vertical',
data : planetEarth,
tpl: "index.html"
});
...
Basically, once I define a file for the tpl, this should be compiled automatically.
Any idea? Thanks!
Related
$stateProvider.state('abc', {
url: '/:id',
modal: true,
template: '<abc></abc>'
})
can I have custom html tag in template property?, e.g. 'abc', I was looking at someone else code but I don't understand how this works, I do have abc.html processed by gulp templatecache stuff. and it is loaded in a modal dialog correctly.
the file is at 'src/app/components/abc/abc.html', how come the template 'abc' knows which html to load? I suppose there must be a definition for 'abc' directive somewhere? but I can't find it.
I finally figured how it works, turns out the custom html tag is defined by a 'component' and there is some naming convention making this work.
http://blog.grossman.io/angular-1-component-based-architecture-2/
https://docs.angularjs.org/guide/component-router
Can I have custom html tag in template property
Yes, of course. Templates can use custom directives no matter how they are defined.
There should be an 'abc' directive somewhere in your module code or one of its dependencies.
See this SO question to be able to list the registered directives of your module and submodules in the console.
Yes, you can use custom html. UI Router provides you two choices, either you give the template or the templateUrl, which for the first one you have to write your html in a string literal, and latter you can set a html file location.
using template with string literal:
$stateProvider.state('abc', {
url: '/:id',
modal: true,
template: '<abc></abc>' // this is correct!
})
using templateUrl with html files.
$stateProvider.state('abc', {
url: '/:id',
modal: true,
templateUrl: '/path/to/abc.html' // if you have a file named `abc.html` in directory `path/to`, the template will be loaded
})
so Im building a brand new ExtJS 5 application using Sencha CMD 5.1.2.52 with the command sencha generate app MYAPP ../MYAPP
It automatically renders to the body tag, but I would rather render it to a div with the id "#myDiv". I looked for the renderto attribute on several files (views, models, app configuration files, etc) with no luck.
So is there a way to override this behavior? Thanks!
When you build an application with Sencha command, the main container will be a ViewPort and by default every ViewPort is rendered to document.body.
You could remove the autoCreateViewport config, and add a launch object where you would create your panel, example:
Ext.application({
name: 'MyApp',
extend: 'MyApp.Application',
//autoCreateViewport: 'MyApp.view.main.Main'
launch: function() {
Ext.create('MyApp.view.main.Main',{
renderTo: yourDivHere
});
}
});
in my extjs app, i create a panel, i also add jquery to one page, however when i click the test section in this page, this page don't render test alert, it seems extjs panel forbid the jquery function. is there any solution to load both html and js to panel content.
relative code below:
var feedback=Ext.create('Ext.panel.Panel', {
title: 'Hello',
layout: 'fit',
autoScroll: true,
bodyStyle:{"background-color":"#fed"},
html: '<div id="test">test</div>',
});
....
$("#test").click(function(){
alert('test')
})
By experience, mixing jquery selector and Extjs element can be pain to manage together. I would suggest to use Ext js selector to do what you're trying to achieve in jquery, since it's pretty basic. However, if you still want to use jquery, using on() function could help, the object is maybe not rendered yet when your jquery code is reached.
$("#test").on('click', function(){
alert('test')
})
I'm just wondering if anyone has had experience using this plugin in a backbone project.
Instead of having all my script template tags in a single index file, I wanted to house my templates in the same directory as my views that required them.
So I was hoping i could use the node option to require the local template and render to it and then append to an #id on my index file (which I'll sort out laster).
So basically I have my handlebars template (template.hbs) and its compiled js (template.js) alongside my backbone view, index.coffee.
public
|_ coffee
|_views
|_card
|_list
index.coffee
template.hbs
template.js
Just as a reference, my grunt file looks like this:
handlebars: {
compile: {
options: {
namespace: 'MyApp.Templates',
node: true
},
files: {
"public/coffee/views/card/list/template.js": "public/coffee/views/card/list/template.hbs"
}
}
},
In my backbone view (index.coffee) I was hoping to require the handlebars template like so:
class CardList extends Backbone.View
template: require('./template')
…
do some other shiz
…
render: =>
template = Handlebars.compile($(this.template).html())
html = template
model: this.model
$(this.el).html(html)
Rendering this is spitting out this error in the inspector:
Uncaught [object Object]
> template = handlebars.compile($(this.template).html());
I obviously dont know what I'm doing, so I'm hoping someone could shed some light on how I can use this plugin properly.
I'm using grunt-contrib-handlebars v0.3.5
Any help is appreciated.
Thanks
You might be able to achieve that by building the files object dynamically.
Maybe something like this, although I'm not sure if cwd supports globbing patterns. I'm also not sure if dest is relative to cwd. If this is not the case, this will not work, but it's worth a shot.
handlebars: {
dist: {
options: {
namespace: 'MyApp.Templates',
node: true
},
// Glob for a directory of files, builds the files object, then map each
// one to a new destination file.
expand: true,
cwd: './public/coffee/views/*',
src: '**/*.hbs',
dest: './',
ext: '.js'
}
},
Look inside your template.js file that you're including. grunt-comtrib-handlbars should have precompiled it into a Javascript function for you, so there's no need to call Handlebars.compile anymore. You could just remove that template = Handlebars.compile line.
Ext.define('MyApp.view.TopToolbar', {
extend: 'Ext.container.Container',
alias: 'widget.toptoolbar',
initComponent: function() {
Ext.applyIf(this, {
layout: 'fit',
cls : 'x-bottombar',
html : 'HTML FRAGMENT'
});
this.callParent(arguments);
}
});
Originally this component had contained a small fragment of html but now its going to be significantly increased. So I'd like to move it to an external file but I found no way in the docs to do this. Is there a way to do this? I don't want to have a big chunk of html in my js.
Use the loader configuration on the component:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-loader
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentLoader