I have a jade template layout.jade file from wekan:
...
template(name="userFormsLayout")
section.auth-layout
//-h1.at-form-landing-logo
img(src="{{pathFor '/wekan-logo.png'}}" alt="Wekan")
section.auth-dialog
+Template.dynamic(template=content)
div.at-form-lang
...
i dont understand what exactly this line is doing:
+Template.dynamic(template=content)
Can somebody explain it to me, i am most curious about this content reference.
It's no related to jade syntax but to Blaze, see related documentation here.
An example of use: when you use a router, you can define what template name is the content dynamic template for each route. Here you are an example with FlowRouter (coffeescript syntax)
...
FlowRouter.route '/home',
name: 'home'
action: ->
BlazeLayout.render 'layout',
content: 'contentTemplateNameForHomeRoute'
FlowRouter.route '/user_profile',
name: 'userProfile'
action: ->
BlazeLayout.render 'layout',
content: 'contentTemplateNameForUserProfileRoute'
...
This could be your layout template (jadesyntax)
template(name='layout')
+header
+Template.dynamic template ='content'
...
Related
I have this tab system, which works perfectly for me. I am learning VueJs. I have a concern
regarding components and/or templates. My concern is:
Using any tab windows as an example,how do I add two components inside a tab,I mean
one of its windows or sections.
Any help,please?
This is my codepen:
https://codepen.io/luis-tavarez/pen/dyOeRwO
It would be worth checking out Vue's Single File Components.
Using the layout you already have in place, you could add additional components to a tab by doing the following. Let's assume the new component will be named Custom.
Add an additional router-view to your HTML:
<section class="mainBody">
<router-view name="header"><button>asaaasas</button></router-view>
<router-view name="content"></router-view>
<router-view name="custom"></router-view>
</section>
Add a new template block to Home, for example above line 43 where you've described the Header template:
const Custom = {
template: `
<section class="content">
<div>
<h1>Here is your new custom component</h1>
</div>
</secion>
`
};
Update Components in your Routes description:
{
path: "/three",
name: 'three',
components: {
header: Header,
content: contentThree,
custom: Custom
},
props: {
header: true,
content: false
}
},
And here it is rendered:
I am trying to learn how component driven development works and I have followed the documents here https://knockoutjs.com/documentation/component-custom-elements.html (Including the many nested links relevant to this topic) however although the TS/JS files are loaded without error the HTML component is never rendered.
Here you can see the the typescript is loaded correctly by RequireJS:
Login-User typescript loaded in browser
And here is the HTML component in the webpage:
HTML component
This is the content within the HTML 'template':
<div class="panel">
<label>Username:</label>
<input type="text" data-bind="Value: $component.Username()" />
<br />
<label>Password:</label>
<input type="text" data-bind="Value: $component.Password()" />
<br />
<label>Valid:</label>
<input type="text" data-bind="Value: $component.ValidUser()" />
</div>
Here is the registration of the HTML template:
const componentName = "Login-User";
ko.components.unregister(componentName);
ko.components.register(componentName, {
viewModel: LoginViewModel,
template: { require: `text!/Views/Components/${componentName}.html` }
});
I do not get any errors in the console but the constructor in the TS file is never hit when adding breakpoints to debug which suggests the me that there was no attempt to actually render the HTML component at all?
I have checked all file paths are correct and deleted and re-compiled the TS files to generate JS files to ensure everything is up to date, I assume I have not properly configured require in some way and so the HTML component is never actually registered however due to no errors being logged I am a bit stuck for where to go next! As I said previously I have read the documentation on Knockout and also for RequireJS however when searching google for issue when implementing a HTML component I seem to only get results for Angular.
Any advice on how to determine the issue would be greatly appreciated, even better if there is any documentation/guides on how to use Knockout/Require/Typescript/HTML Components together which someone could point me at that would be great!
I think I have provided everything need but if not let me know.
Thanks,
Danny
Okay after a couple more hours of trial and error I figured out I had a few problems, for anyone else having this issue try the below resolutions:
I was not calling ko.applybindings();
import * as ko from "knockout";
export default class LoginViewModel {
Username: KnockoutObservable<string>;
Password: KnockoutObservable<string>;
ValidUser: KnockoutComputed<boolean>;
constructor(username: string, password: string) {
this.Username = ko.observable(username);
this.Password = ko.observable(password);
this.computedMethods();
}
private computedMethods(): void {
this.ValidUser = ko.pureComputed(() => {
return this.Username() === "Danny" && this.Password() === "pasword";
});
}
}
const componentName = "login-user";
ko.components.register(componentName, {
viewModel: LoginViewModel,
template: { require: `text!Scripts/Typescript/${componentName}.html` }
});
ko.applyBindings(); << This is important as it actually binds the custom element i.e login-user params="username: 'Danny', password: 'none'"></login-user> and without it nothing will be rendered on the page
After correcting this issue I then got a 404 in console when trying to load the custom element and although the filepath was correct I found that the best way to resolve this was to have the custom element in the same folder as it's TS counter-part:
Before:
template: { require: `text!/Views/Components/${componentName}.html` }
After:
template: { require: `text!Scripts/Typescript/${componentName}.html` }
Google searches recommended installing the following nuget packages although I think only require.text is actually required, if it doesn't resolve your issue it's worth a shot..:
Require Packages
I initially had my components named using camel case i.e Login-User.ts and Login-User.html, I read somewhere that they should be lower case to be valid html 'Tags' and both the .ts and .html files should be named exactly the same
Hope this helps anyone else having issues.
I'm an angular novice, currently building an angular2 app.
What I want to do is generate a series of DOM components from the following object data:
// Class construct with alphabeticalized properties
export class Screens {
screens: Array<Object>;
}
export var screenData: Screens = {
// Lists all of the audio files in the course
screens: [
{
id: 0,
template: 'templateURL-0.html',
css: 'templateURL-0.css'
},
{
id: 1,
template: 'templateURL-1.html',
css: 'templateURL-1.css'
},
{
id: 2,
template: 'templateURL-0.html',
css: 'templateURL-0.css'
}
]
};
I want the end result to be something similar to the following where template 0 will be displayed twice, and template 1 once; in order:
<app-screen></app-screen> <!-- templateURL-0.html content -->
<app-screen></app-screen> <!-- templateURL-1.html content -->
<app-screen></app-screen> <!-- templateURL-0.html content -->
I read the tutorial on Structural Directives and I think I need to implement something along those lines, however I'm honestly feeling a little lost on the best approach.
Ideally I would like to have something like:
<app-screen *ngFor="let screen of screenData.screens"></app-screen>
Which would then somehow set the template URL depending on what screenData.screens.template is.
Or should I do something like this? (unsure if correct syntax)
<div *ngFor="let screen of screenData.screens" [ngSwitch]="screenData.screens.template">
<app-screen-template1 [ngSwitchCase]="'templateURL-0.html'"></app-screen-template1>
<app-screen-template2 [ngSwitchCase]="'templateURL-1.html'">Ready</app-screen-template2>
</div>
Note: I will never change the templateURL reference.
I found that the best method to achieve this is to implement routing with the built in RouterModule.
So in the end I have the following in my class, where the template property is a url path / url segment.
// Class construct with alphabeticalized properties
export class Screens {
screens: Array<Object>;
}
export var screenData: Screens = {
// Lists all of the audio files in the course
screens: [
{
id: 0,
template: 'template/template-0'
}
]
};
Then when I want to load / instantiate this template, all I have to do is navigate to this url using something like:
<!-- Goes to localhost:4200/template/template-0 -->
<button [routerLink]="[screen.template]"></button>
Where screenis a bound variable in my .ts.
More on routing and navigation here.
I have got my data from my controller like below.
controller:
$http.get('json/projects.json').success(function(data) {
$scope.projects = data;
});
my data in json file is something like this:
json:
{
...
projects = ['hello world', 'www.google.com', 'hello world.']
}
html:
<div ng-repeat='p in projects'> {{p}} </div>
My question is how to display 'www.google.com' as a link rather than a simple text?
You can use the liky filter from the ngSanitize module: https://docs.angularjs.org/api/ngSanitize/filter/linky
I am afraid you will have to change your 'www.google.com' to 'http://www.google.com'
I would like to use the same HTML template in 3 places, just each time with a different model.
I know I can access the variables from the template, but there names will be different.
Is there a way to pass a model to the ngInclude?
This is what I would like to achieve, of course the attribute add-variable does not work now. Then in my included template, I would acces the detailsObject and its properties.
<pane title="{{projectSummary.ProjectResults.DisplayName}}">
<h2>{{projectSummary.ProjectResults.DisplayName}}</h2>
<ng-include src="'Partials/SummaryDetails.html'" init-variable="{'detailsObject': projectSummary.ProjectResults}"></ng-include>
</pane>
<pane title="Documents" header="true"></pane>
<pane ng-repeat="document in projectSummary.DocumentResults" title="{{document.DisplayName}}">
<h2>{{document.DisplayName}}</h2>
<ng-include src="'Partials/SummaryDetails.html'" add-variable="{'detailsObject': document}"></ng-include>
</pane>
<pane ng-repeat="header in [1]" title="Languages" header="true"></pane>
<pane ng-repeat="language in projectSummary.ResultsByLanguagePairs" title="{{language.DisplayName}}">
<h2>{{document.DisplayName}}</h2>
<ng-include src="'Partials/SummaryDetails.html'" add-variable="{'detailsObject': language}"></ng-include>
</pane>
If I took a bad approach with using ng-include, is there something else I should try?
There is a rather simple solution, although I must admit, it's not what Misko would recommend. But if creating a directive is an overkill for you and getting Brice's patch is not feasible then the following will help you.
<div ng-repeat="name in ['A']" ng-include="'partial.html'"></div>
<div ng-repeat="name in ['B']" ng-include="'partial.html'"></div>
<script type="text/ng-template" id="partial.html">
<div>{{ name }}</div>
</script>
It's quite evident why it works. See an example here: http://jsfiddle.net/Cndc6/4/
NOTE: this is not my original answer but this is how I'd do this after using angular for a bit.
I would create a directive with the html template as the markup passing in the dynamic data to the directive as seen in this fiddle.
Steps/notes for this example:
Define a directive with markup in the templateUrl and attribute(s) used to pass data into the directive (named type in this example).
Use the directive data in the template (named type in this example).
When using the directive in the markup make sure you pass in the data from the controller scope to the directive (<address-form type="billing"></address-form> (where billing is accessing an object on the controller scope).
Note that when defining a directive the name is camel cased but when used in the markup it is lower case dash delimited (ie it's named addressForm in the js but address-form in the html). More info on this can be found in the angular docs here.
Here is the js:
var myApp = angular.module('myApp',[]);
angular.module('myApp').directive('addressForm', function() {
return {
restrict: 'E',
templateUrl: 'partials/addressform.html', // markup for template
scope: {
type: '=' // allows data to be passed into directive from controller scope
}
};
});
angular.module('myApp').controller('MyCtrl', function($scope) {
// sample objects in the controller scope that gets passed to the directive
$scope.billing = { type: 'billing type', value: 'abc' };
$scope.delivery = { type: 'delivery type', value: 'def' };
});
With markup:
<div ng-controller="MyCtrl">
<address-form type="billing"></address-form>
<address-form type="delivery"></address-form>
</div>
ORIGINAL ANSWER (which is completely different than using a directive BTW).
Note: The fiddle from my original answer below doesn't appear to work anymore due to an error (but keeping it here in case it is still useful)
There was a discussion about this on the Google Group you can see it here.
It looks like this functionality is not supported out of the box but you can use Brice's patch as described in this post.
Here is the sample code from his jsfiddle:
<script id="partials/addressform.html" type="text/ng-template">
partial of type {{type}}<br>
</script>
<div ng-controller="MyCtrl">
<ng-include src="'partials/addressform.html'" onInclude="type='billing'"></ng-include>
<ng-include src="'partials/addressform.html'" onLoad="type='delivery'"></ng-include>
</div>
There is a pull to fix this but it looks like it's dead:
https://github.com/angular/angular.js/pull/1227
Without modifying the Angular source code this will solve the problem in a reusable not-too-hacky-feeling way:
directive('newScope', function() {
return {
scope: true,
priority: 450,
};
});
And an example:
<div new-scope ng-init="myVar = 'one instance'" ng-include="'template.html'"></div>
<div new-scope ng-init="myVar = 'another instance'" ng-include="'template.html'"></div>
Here is a Plunker of it in action:
http://plnkr.co/edit/El8bIm8ta97MNRglfl3n
<div new-scope="myVar = 'one instance'" ng-include="'template.html'"></div>
directive('newScope', function () {
return {
scope: true,
priority: 450,
compile: function () {
return {
pre: function (scope, element, attrs) {
scope.$eval(attrs.newScope);
}
};
}
};
});
This is a directive that combines new-scope from John Culviner's answer with code from Angular's ng-init.
For completeness, this is the Angular 1.2 26 ng-init source, you can see the only change in the new-scope directive is the addition of scope: true
{
priority: 450,
compile: function() {
return {
pre: function(scope, element, attrs) {
scope.$eval(attrs.ngInit);
}
};
}
}
Quick'n'dirty solution:
<div ng-init="details=document||language||projectSummary.ProjectResults">
I hear you! ng-include is not that reusable because it has access to the global scope. It's a little weird.
There should be a way to set local variables. Using a new directive instead of ng-include is a cleaner solution.
The ideal usage looks like:
<div ng-include-template="'Partials/SummaryDetails.html'" ng-include-variables="{ 'detailsObject': language }"></div>
The directive is:
.directive(
'ngIncludeTemplate'
() ->
{
templateUrl: (elem, attrs) -> attrs.ngIncludeTemplate
restrict: 'A'
scope: {
'ngIncludeVariables': '&'
}
link: (scope, elem, attrs) ->
vars = scope.ngIncludeVariables()
for key, value of vars
scope[key] = value
}
)
You can see that the directive doesn't use the global scope. Instead, it reads the object from ng-include-variables and add those members to its own local scope.
It's clean and generic.