This problem is a bit hard to explain, but I'll give it a try. When I'm using a nested view inside an ItemView of a CollectionView the next ItemView will append inside the previous childView.
<div id="items">
{{#collection}}
<div class="item">
{{title}}
{{view childView}}
</div>
{{/collection}}
</div>
Results in:
<div id="items">
<div class="item">
The title
<div class="childView">
This is the childView..
<div class="item">
The title
<div class="childView">
This is the childView..
</div>
</div>
// And so on...
</div>
</div>
</div>
It looks like the collectionView is keeping a reference to the last view there was something inserted into. So in this case the childView of the itemView, but it should be the itemView.
I hope I made myself a bit clear, because it is frustrating.
This looks like a known thorax bug that was closed.
I would double check your templates and make sure all your html elements have closing tags. Also get the latest version of thorax (assuming there are no breaking changes). It could be that the bug was closed incorrectly and still a problem.
Related
I know it can be achieved using Javascript by manually separate the slot elements and put them into the DOM tree but I wonder if it's supported within the box. Something like this:
<my-element>
<div slot="items">Item 1</div>
<div slot="items">Item 2</div>
<div slot="items">...</div>
</my-element>
And the template should be like this:
<div class="items">
<div class="item"> <!-- Should be 1 item per slot -->
<p>Something else</p>
<slot name="items"></slot>
</div>
</div>
Is this only possible using slotchange and populate the items by Javascript? Is there any better solution, without Javascript or with less Javascript? Maybe there is an element similar to slot that I am not aware of?
since all slot="items" will be slotted into <slot name="items"> only with the slotchange Event can the Component Author determine what happened.
Note: You do not populate the items, the default slotting mechanism does; you can only remove items after they are slotted; but then your HTML above needs more info on which Item needs to be slotted.
Then the question remains, Why use multiple slot="items" at all then?? If a slot can take 1 item, then only assign 1 item
Imperative Slots might help out: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Imperative-Shadow-DOM-Distribution-API.md
Update, I misunderdstood OPs question
All he needs to do is:
Create another Web Component: <slotted-item slot="items"></slotted-item>
I am building my first AngularJS app comming from backbone. I have a list where the user can select an item. The goal is show the details of the selected item in a view below the list. The list-view and detail-view are both part of the main-view.
my list view
<div id="rfc-records" class="container-fluid">
<div ng-repeat="record in records" ng-click="selectRow()" class="row select table-row">
<div class="col-lg-1 center">
{{record.id}}
</div>
<div class="col-lg-1 center">
{{record.rfcObject}}
</div>
<div class="col-lg-5">
{{record.rfcFunction}}
</div>
<div class="col-lg-2">
{{record.status}}
</div>
<div class="col-lg-3">
{{mii.utils.date.extToIntDate(record.firstProcessing)}}
</div>
</div>
</div>
As you see I already added an event to each row: ng-click="selectRow()".
It is unclear to me how to know the selected row in this function. I could do something like this :
ng-click="selectRow(record)
MainController
$scope.selectRow = function(record){
alert(record.id); // undefined
}
The result is undefined so this does not work. Plus this seems like a bad approach to pass the model back from the view to the controller. I might be able to get the application working but I have the feeling that I won't be using the paradigm as intended.
In backbone I would have a seperate view for each row where the model is bound to. But in Angular models aren't as explicit as in backbone.
In general I don't really understand how models work in Angular. R
Regarding this example I have the following questions:
How do I know what item is selected in the list
Where should I put the selectRow function? In the controller of the Mainview or in the list-view directive?
How do I pass the selected model to the details-view.
Well, passing current item into ngClick handler is pretty usual way to solve this task. I'm not sure why it's not working for you, it should. Here is the example of this typical approach.
In backbone I would have a seperate view for each row where the model is bound to. But in Angular models aren't as explicit as in backbone.
Actually Angular is even more elegant in this concern. You still have model available in every iterated row. You can refer current child scope as this in controller. So in your case if you don't want to pass record object into controller function on click, you can use this and it will point to the current scope object (remember that ngRepeat creates new child scope for every row):
$scope.selectRow = function() {
alert(this.record.id);
};
and you don't have to pass anything in HTML:
ng-click="selectRow()"
Demo: http://plnkr.co/edit/kN0vB6N6v7XnqASRSmAd?p=preview
ng-click and ng-repeat are in same div. You can add a new div in this repeated div like and this is works for me :
<div id="rfc-records" class="container-fluid">
<div ng-repeat="record in records" class="row select table-row">
<div class="col-lg-1 center">
Select This item<input type=button ng-click="selectRow(record)">
</div>
<div class="col-lg-1 center">
{{record.id}}
</div>
<div class="col-lg-1 center">
{{record.rfcObject}}
</div>
<div class="col-lg-5">
{{record.rfcFunction}}
</div>
<div class="col-lg-2">
{{record.status}}
</div>
<div class="col-lg-3">
{{mii.utils.date.extToIntDate(record.firstProcessing)}}
</div>
</div>
</div>
I have a collection of items, that I would like to stuff into a bootstrap grid. This then looks like this:
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
So I would need to loop through my collection and adding after every second item
There are two issues:
invalid html! No idea how to get around this
Issues with the module, but I think with some helpers I could get around.
Best would be if there were some examples.
Thanks for any inputs
check out this question. you should be searching for handlebars or spacebars to get better results. Blaze is the template engine; not the template system (if that makes sense.)
How do I populate a bootstrap grid system using handlebars for each command in Meteor.js?
Generically, you need to ensure that your collection is exposed to the template, most likely in a template helper. Then you can iterate the collection items like so:
{{#each templateHelperName}}
<div class="row">
<div class="col-md-8">{{propertyName1}}</div>
<div class="col-md-4">{{propertyName1}}</div>
</div>
{{/each}}
To create a template helper, take a look at the meteor docs; they're quite good.
If this doesn't help, perhaps you can provide some more clarity about what your collection looks like, and how you'd like it displayed. Your code doesn't really give much indication.
I have the following code:
<div ng-repeat="item in items">
<div ng-include src="itemG.html"></div>
</div>
then in itemG.html I have:
<img src="{{item.image}}">
How can I get my ng-repeat to print out all of the images?
There are 2 potential problems in the code...
src="itemG.html" needs an extra pair of single quotes like this:
<div ng-repeat="item in items">
<div ng-include="'itemG.html'"></div>
</div>
And the img tag is missing a closing ":
<img ng-src="{{item.image}}">
Plunker: http://plnkr.co/edit/7IUs7WPdUYkfVVKtBN1m?p=preview
Basically, what this comes down to is that the browser will interpret what inside the src attribute literally, until angular comes along to replace it. If you have a string constant, you can use single quotes inside the src="'myurl.html'", but if you have a value that needs to be bound by angular, you have to use ng-src and the expression syntax of {{ }}
You also need to bind a model to your template file itself. It's not going to pick up the bindings from your repeater without some help from either the ng-include event directives, or it's own model/controller/directive. There are too many different ways to demonstrate that, and it's also relevant on what markup is in your template file, which I can't say.
However, if the img tag is the only thing in that file, then instead of the file, I'd just do this:
<div ng-repeat="item in items">
<img ng-src="item.image" />
</div>
Since you're inside a repeat, it's already being included, making the ng-include redundant.
In principal code
<div ng-repeat="item in items">
<ng-include src="itemG.html" ng-controller="MyCtrl" ng-init="i=item"><ng-include>
</div>
then in itemG.html I have:
<img src="{{i.image}}">
Hey all I'm trying to get a feel for angular and have ran into a little snag.
I have a container structure like the following:
<div class="main-container" ng-view>
<!-- The below divs are constantly being
reloaded based on the current URL and it's associated view -->
<div class="left-col">
</div>
<div class="right-col">
</div>
</div>
Before I implemented Angular I just had a simple script that would check the height of the window and set the height of the left column and right column divs accordingly.
With angular there is probably a better way to do this then attaching an event function to the window object. Basically I want to fire a function everytime a new view is rendered but not duplicate the below code in all of my angular controllers like so:
$scope.$on('$viewContentLoaded', setColumnHeight);
Any help would be appreciated. Thanks!
I've solved this problem in my app by having a root "Application Controller" at the top of the DOM tree. For example:
<body ng-controller='applicationController'>
...
<div class="ng-view"></div>
...
</body>
applicationController is always there, and can set up bindings on its scope when it is created.
How about putting that event listener on the root scope:
$rootScope.$on('$viewContentLoaded', setColumnHeight);
You could use something like this:
<div class="main-container" ng-view>
{{ setColumnHeight() }}
<!-- The below divs are constantly being
reloaded based on the current URL and it's associated view -->
<div class="left-col">
</div>
<div class="right-col">
</div>
</div>
and it will check the height every time a render is made, however, this seems to be a bit over processing.
The best approach would be to only update the height from both columns when the height of one of them changes. For that you could use DOM Mutation Observers, however they are not yet available on all browsers. If that's not a problem for you, check the mutation-summary lib.
If you are using jQuery you can also try this: https://github.com/jqui-dot-net/jQuery-mutate (examples here).