I'm running into a bit of a brick wall with how to render content inside some dynamic HTML content which I don't control, with Ember v1.13.1. In this particular scenario, I'm getting a navigation head, and navigation foot from a service call and putting them in my component:
export default Ember.Component.extend({
// I don't control these. They come from somewhere else
bodyStart: '<div class="header">...</div><div class="contentBody">',
bodyEnd: '</div><footer>...</footer>',
});
So, in my component template, I'm trying to do something like:
{{{bodyStart}}}
{{yield}}
{{{bodyEnd}}}
I would expect the yield content to be placed inside a <div class="contentBody"> element, but it's not. Instead content body is closed before the {{yield}}, and the bodyEnd closing div is ignored.
It's possible I'm just missing something obvious. Any ideas on how to solve this would be greatly appreciated.
Cheers
I believe what happens is that each {{{variable}}} is constructed independently and independently inserted into the DOM, which leads to unclosed DOM nodes that gets closed. The only way I can think of is to include the template compiler and recompile the template with bodyStart and bodyStop.
App.ContentWrappedComponent = Ember.Component.extend({
startBody: '',
endBody: '',
layout: function(){
return Ember.HTMLBars.compile(
this.get('bodyStart') +
'{{yield}}' +
this.get('bodyEnd')
);
}.property('bodyStart', 'bodyEnd')
});
You also need to add to your Brocfile.js:
app.import('bower_components/ember/ember-template-compiler.js');
JSBin: http://emberjs.jsbin.com/ticituxapa/3/edit?html,css,js,output
Related
I have a template which is nested inside another template which I want to load when i click on a button.
So the nested template is loaded dynamically. This is what I have done so far.
This is the main body.html (this loads when a url is provided in the browser e.g. http://url#/newtemplate)
<div ui-view> </div>
Other section of the code has been removed for brevity
This is the new_template.html which I expects it to show when I click a button.
When I put a template name directly like below i.e. when I hard code it
<div ui-view="number1"></div>
It loads the template fully.
This is the dynamic model
<button ng-model="template_name" ng-value="number1">Button1</button>
<div ui-view="{{template_name}}"></div>
{{template_name}}
The above does not load the template as I expected. but it shows the string number1 when
the button is clicked
What can I do for it to load the template....
This is my controller
.state('parent',{
url: '/newtemplate',
views:{
'':{
templateUrl: "parent.tpl",
contoller:"controller",
},
'number1#parent':{
templateUrl:"number1.tpl",
contoller:"formcontroller"
},
'number2#parent':{
templateUrl:"number2.tpl",
contoller:"formcontroller"
},
'number3#parent':{
templateUrl:"number3.tpl",
contoller:"formcontroller"
}
}
})
Strange enough when I used the dot notation it did not work so I have to use the absolute naming method.
I also noticed that when I added the nested views as shown above the time it takes before the template gets loaded take a very long time.
Please I would appreciate any help which can allow me to load a nested view at runtime (possibly very fast)
Expecting more answer
I still hope that the I can make use of ui-view/ui-router because of the ability to make use of controller.
I'm not sure you can use uiView to load html dynamically.
I would try another possible solutions:
Use directives
Using ngInclude
I'll leave you an example with ngInclude: https://next.plnkr.co/edit/M5hl71mXdAGth2TE?open=lib%2Fscript.js&deferRun=1&preview
Background Information
The basic structure of my initial application was
main.pug
... code elements ...
<div class = "panel">
... code elements ...
and a starter javascript file that is loaded in the header, which contains this block of code
starter.js
document.addEventListener('DOMContentLoaded', function() {
... logic to determine html page to show in the panel div ...
... it determines the name and saves it in the variable 'htmlPageToShow' ...
$(".panel").load(htmlPageToShow);
});
this bit of code in starter.js is how content is displayed in the panel div
it determines the file name and then loads it into the dom element
Problem
I decided that i wanted to have React handle this part, my conclusion was to render a React component called into the panel div, in hopes of improving this bit of the code without having to change the entire code base but two days in, and I cannot get a react component, or html element of any kind, to render in the div, similar to how html pages were loaded
My attempts
I left the main.pug file alone and in starter.js, did this:
starter.js
import react from 'react';
import ReactDom from 'react-dom';
import PanelHandler from './PanelHandler';
ReactDom.render(
<PanelHandler/>,
document.getElementById('panel'));
I've tried multiple versions of this, such as replacing the get element id bit with $(".panel") I've tried using getElementByClassName, QuerySelector, I've tried using window.document
I've also tried putting the whole thing into a script tag and appending it to the end of main.pug
At some point, I tried creating a new html page, with the code above in a script tag, and then loading that into panel, with the previous logic, all to no avail
I want to know if I'm missing something, can pug just not be used with React? am I missing a dependency? any help at all would be appreciated!
Routing in Ember.js is troubling me, and I can't seem to find the "correct" way of doing what I want to do.
I have a route, let's call it #/map, which contains a series of top-level and containers of child views.
Hierarchically, I have a top map_view, which contains 4 additional views: A topbar (which has topbar menu item triggers within it), a sidebar (which has sidebar menu item triggers in it), and two containerViews (a sidebar menu containerView and a topbar menu containerView), which will contain one or more nested views that are programatically inserted on clicking a menu item trigger.
My issue is that while this works, and I can embed all of these views into their various templates, none of them are linking with controllers, and the controller they are picking up is the map_controller (which makes sense as that is the linked outlet controller for the top level view). Currently I am using a method described on Ember's github here, but it seems a little...hacky?
Here is a JSFiddle showing the problem. Notice that the controller for level-one-entry and level-two-entry is the index_controller: http://jsfiddle.net/fishbowl/Z94ZY/3/
Here are some code snippets for what I am doing to get around it:
map.hbs:
<section id='map'>
{{view App.SidebarView}}
{{view App.TopbarView}}
<div id='map-canvas'></div>
</section>
topbar_view.js:
var TopbarView = Em.View.extend({
templateName: 'topbar',
classNames: ['topbar-container'],
init: function() {
var content = this.get('content'),
controller = App.TopbarController.create({
view: this
});
this.set('controller', controller);
this._super();
}
});
module.exports = TopbarView;
topbar_controller.js
var TopbarController = App.ApplicationController.extend({
content: Ember.computed.alias('view.content'),
trigger: null,
start_date: null,
end_date: null,
travelling: null,
word: 'topbar'
});
module.exports = TopbarController;
I'm not doing anything special in the router other than declaring this.route('map'). A further problem i'm having is that whenever I declare needs: ['some_other_controller'], I get an error
<App.TopbarController:ember413> specifies 'needs', but does not have a container. Please ensure this controller was instantiated with a container.
Am I missing something blindingly obvious about how to go about linking these together. I'm guessing that i'm using routing incorrectly. I don't want to change what the URL is, as i'm technically not moving pages, just opening and closing menus on the page, but I don't really understand how else i'm supposed to use the router to achieve this.
EDIT 2: i've mocked up another jsfiddle of what I could do with outlets and link-to's, but i'm not sure that I want the URL changing (as you'd probably be able to do odd things with the back button etc): jsfiddle - The alternative to this is to set location: 'none' in the Router, but I don't really like that option either...
I am new to DOJO. I have a custom widget , which uses a template file for the dialog box contents.
I am extending dijit.Dialog in the script file.
dojo.declare(
"custom.credentials",
[dijit._WidgetBase, dijit._Templated,dijit._WidgetsInTemplateMixin,**dijit.Dialog**],
{
templatePath: dojo.moduleUrl("custom", "templates/credentials.html"),
....
....
postCreate: function() {
this.inherited(arguments);
alert(this.containerNode);
alert(this.mainDIV);
},
});
My Template test file looks like this
<div data-dojo-attach-point="mainDIV">
Login Dialog Box template here
</div>
For some reason, when I alert on this.mainDIV, I get 'undefined'. It does not read the template file. Also, this.containerNode gives me 'HTMLDIVElement', (parent dijit dialog DIV).
I am not able to figure out after a lot of trial error where exactly the issue is. Any help would be greatly appreciated.
Calling code
function opnPop(){
var pop= dijit.byId("customPopup");
pop.show();
}
<div dojoType="custom.credentials" id="customPopup"/>
Note : *When dijit.Dialog is not extended* it reads the template file without any problem, I.e, I am able to access this.mainDIV.innerHTML , that contains my own inner html contents.
Thank you.
If Dialog has to be sub-classed, then it must be the base class. Here, it seems that it is used as a mixin. Anyways, the problem is with the template that is used.
The template will be parsed and used by the code in Dialog. So, the template mentioned here has nothing but a div element with an attach point. There is no "containerNode" element (ie. attach point) and you are trying to access it in your js code, which will give error.
More important, the "titleBar" & "titleNode" elements are also missing form template, which will give errors while parsing the template. In order to avoid that, the code part that uses these elements need to be removed from js, to avoid error. So the widget creation will be successful. Try with the standard dijit.Dialog's template.
Add the data-dojo-attach-point="mainDIV" to the top level Dialog's div in the template.
In template, more things can be added, which won't cause any issues. But, if removed anything, will cause problem. If we are sub-classing a class/widget, we need to comply to the existing code.
I have multiple tabs in my page and a single empty div below the tabs. I'm loading different grails templates into this div like the following
$('.project-content').load('<g:createLink controller="test" action="testDashboard" params=" [testInstance:applicationInstance.name]" />' + "/" + new Date().getTime() );
My controller handles this as follows:
def testDashboard(){
render template: 'testing/testTemplate', model: [applicationInstance: params.get('applicationInstance')],contentType: 'html'
}
The template itself has some html content within a div
Content to be displayed
The template does get rendered inside the div. However when i view the source for the page I cant find the template html source.
Can you please tell me how i can make this available? I need it to attach some events to testDiv
Thanks,
Nav
You will never find it in the html Source-Code because it isnt there.
Your Js that "loads" the templates is executed after the document (document==Sourcecode) is loaded. So You are manipulating the DOM by loading new content to it, to see it, just use the element-inspector of chrome or firebug for firefox.
If you want to attach events to the content, you have to delegate the selectors or you pass the relevant script to execute within the template, thats also possible.It will execute as soon as your template is successfully loaded.