I have a directive structure that I'm using to simplify the user interface. The implementation of the directives should handle the complexity. The directive structure is as follows:
<re-widget id="widget_html_content">
<re-list name="HtmlContent" query="all">
<re-items each="item">
<div>
<span> {{item.content}} </span>
</div>
</re-items>
</re-list>
</re-widget>
The above should generate HTML of the following flavor:
<div id="widget_html_content">
<div ng-controller="ListCtrl" name="HtmlContent" query="{}" class="HtmlContent">
<div ngRepeat="item in ListCtrl.items">
<div item="item" ng-controller="ItemCtrl">
<div>
<span> {{item.getContent()}} </span>
</div>
</div>
</div>
</div>
</div>
This is basically a transformation task (transform the directive HTML to the standard HTML) with some caveats. The following are the requirements:
(1) the re-widget creates isolated scopes since it can be reusable in the page, possibly with the same data input
(2) The re-list tag transforms itself to use a ListCtrl, which the ListCtrl knows how to get the list data by using the input NAME and QUERY attributes/parameters
(3) the re-items tag displays each item in the list by using its inner template defined by the user. So basically it is an ng-repeat over the list items. However, each item ng-repeated will have its own ItemCtrl controller instance. The ItemCtrl instance would get a reference to the item model and data so that it can expose an API for the item data. Note: the item model is the value of the each attribute in the re-items tag.
I have a plunkr with most of the code at http://plnkr.co/edit/Ja0uDb630RYsSjVOGNRb?p=preview
Any help is greatly appreciated!
Related
I create html components with Thymeleaf. Components are declared in separate file:
Declaration of basic button in buttons.html
<div th:fragment="btn-basic" class="btn btn-basic" th:text="${text}" th:classappend="${class}">
Button
</div>
The idea is to provide some type of tool-set for components. Code for using this component will be:
<div th:replace="~{buttons :: btn-basic (text='Button Text', class='button-class')}"></div>
It's working well, but I think about case when button need to have attributes like: onclick="..." or data-customAttr="..." or any other attribute. And here goes the problem:
How to pass attributes to button?
One way is to pass it as parameter of fragment, but it's too ugly.
Is there any way to get attributes of placeholder in fragment? (see example below)
This how I want to call fragment:
<div th:replace="~{buttons :: btn-basic (text='Button Text', class='button-class')}" onclick="..." data-customAttr="..."></div>
and in btn-basic fragment want to get these attributes and attach to it. Something like this:
<div th:fragment="btn-basic" class="btn btn-basic" th:text="${text}" th:classappend="${class}" onclick="..." data-customAttr="...">
Button
</div>
Any ideas?
I had a similar idea, but the question is, if the customizing of a component is as complex as the result, what is the benefit?
Btw. with the Thymeleaf Layout Dialect you can do something like this: https://ultraq.github.io/thymeleaf-layout-dialect/Examples.html#reusable-templates, I favor that, instead of the everything-as-parameter approach.
I have a angular js application, in which I am retrieving http response data using rest services. I want to conditionally display the part of the page. For eg: if the response data in angular is "manager" , the page should have different options displayed and if the response data is "employee" , same part of webpage should display different options.
How do I do that?
This is single page application.
For your requirement you can use ng-switch directive. The ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression.
For your example:
<div ng-switch="expression">
<div ng-switch-when="manager">...</div>
<div ng-switch-when="employee">...</div>
</div>
Here expression will contain info you get from response data of either manager or employee.
Hope this will be helpful to you!
You can use ng-show directive like:
<div>
<div ng-show="employeeType == 'Manager'"> </div>
<div ng-show="employeeType == 'employee'"> </div>
<div>
For more information refer to this link: https://docs.angularjs.org/api/ng/directive/ngShow
I have an Angular 2 application in which i have a master component containing tree child components.
In one of my child components ( lets call it user_input) i have a form with user input.
in my master component i have a button which needs to check if my form of the child component is valid, thus enabling it.
i have tried to access it via. (from master.view.html)
<user_input #usrInput></user_input><button
[disabled]="!usrInput.formname.form.valid(click)="next()">
Next</button>
But since my user_input form is not initialized at the time i validate om my master this throws an "of type unknown" exception.
Is there a clever way to solve this? i have a service shared by the two but i prefer not to use it for this.
Thanks in advance!
[UPDATE]
I have my child elements in an ngSwitch.
<div *ngSwitchCase="0">
<create-user-info></create-user-info>
</div>
<div *ngSwitchCase="1">
<create-user-services></create-user-services>
</div>
<div class="col-lg-12" *ngSwitchCase="2">
<create-user-conditions></create-user-conditions>
</div>
</div>
once i moved it out of it the error was resolved.
As i needed it to be in an ngSwitch, i used the solution kindly provided below
You could leverage the so-called safe navigation operator. This way, the following members only get evaluated, if usrInput is not null anymore.
<user_input #usrInput></user_input>
<button [disabled]="!usrInput?.formname.form.valid"
(click)="next()">Next</button>
So I am using Ember.js each helper and I am having trouble putting values where I want them.
Here is what I want my html to look like.
<div id="item0">
item0Value
</div>
But I can't figure out how to write this in the handlebars template.
This is what I tried.
{{#each item in array}}
<div id="item{{item.id}}">
{{item.value}}
</div>
{{/each}}
This gives me an error.
Uncaught Error: Assertion Failed: An error occured while setting up template bindings. Please check for invalid markup or bindings within HTML comments.
Is there a way to do what I want here? or is it not possible to put values inside the html tags?
From ember/guides:
It is often useful to specify a controller to decorate individual
items in the ArrayController while iterating over them. This can be
done by creating an ObjectController:
You can use an item controller to generate the values you need, and then access them in your template:
{{#each item in array itemController="song"}}
<div {{bind-attr="item.cssId"}}>
{{item.value}}
</div>
{{/each}}
// controllers/song
App.SongController = Ember.ObjectController.extend({
cssId: function() {
return 'item' + this.get('id');
}.property('id')
...
Note: As best practice it is better to declare your itemController in the template, and not directly in your ArrayController
I have been trying create a polymer-element that generates a ul list based on an ajax request and then renders the "li" elements based on templates that can somehow be passsed in.
It's basically an attempt to make a polymer rebuild of the 'select2' library for autocompletion.
So, the base template I have so far looks like this:
<polymer-element name="auto-complete" attributes="url_base item_template">
<aj-ax id="xhr" url="{{url_base}}" params="{}" handle_as="json" on-ajax-response="{{handle_res}}" on-ajax-error="{{handle_err}}"></aj-ax>
<input id="eingabe" type="text" on-keyup="{{process_request}}" on-blur="{{hide_dropdown}}"/>
<div id="dropdown" hidden?="{{hide}}">
<ul>
<template repeat="{{i in items}}">
<li> i.text
<!--
the process_request handler makes the ajax request and sets
the "items" and un-hides the dropdown.
the above works, but I want to make it more generic so that
you can pass in a template that reads the item model such as
<template ref="{{item_template}}" bind></template>
where item_template is the ID of a template in some outside
scope
-->
</li>
</template>
</ul>
</polymer-element >
</div>
I've also tried to make a base auto-complete.html polymer-element and then extend it based on the auto-complete type...but to no avail.
Any thoughts, ideas?
I want to stick to declarative methods if possible and avoid having to build the DOM elements myself with document.createElement
Is that even possible?
thanks!
I've come up with a cool approach to do this actually!
http://jsbin.com/hesejipeha/2/edit
The main idea is that you conditionally render the your template once you've injected any child templates into the shadow DOM (and thus made it possible to call them by ref in scope!)