I'm developing my first "complex" application on Dart and I'm finding some trouble on how to work with more than one view (I want to develop the application to run within a single page).
First of all, I'm assuming that this (using Polymer) is the right approach to work with various views (or "app screens") of the application. However, if it's not, I would like to know (of course). And by "app screens", I'm saying something like creating various forms in Java.
So, for instance, I have two buttons at the top of the page. When you click the first one, it shows a view with an user registration area. When you click the second button, it shows a view with an editable grid.
Could you give me some code example of this simple app?
You can use CSS style properties for a polymer element like you do for any native element.
You can query like this:
Element e = querySelector('my-form');
and then hide/display it:
e.style.display = 'none';
e.style.display = 'block';
After(!) you initialized polymer, you can use the element's class (if existent):
#CustomTag(...)
class MyForm ... {
...
}
MyForm e = querySelector('my-form') as MyForm;
Then you can go ahead and set attributes of your class (if you need it) or use the style property because the class inherits from HtmlElement.
You could also use classes for this. Dart comes with some "toggle" functionality:
element.classes.toggle('hidden');
element.classes.toggle('shown');
Regards, Robert
You could use the template if functionality.
This way views that are currently not active are automatically removed from the DOM and automatically inserted again when the model attribut changes.
<polymer-element name='app-element'>
<template>
<template if='{{appModel.view == 'view1'}}'>
<view1></view1>
</template>
<template if='{{appModel.view == 'view2'}}'>
<view2></view2>
</template>
</template>
<script ...>
</polymer-element>
Related
I have 2 classes i created which extend PolymerElement, we can call them: ElementA, and ElementB.
So, i want to add ElementB to ElementA dynamically, so i was thinking to add it to the onReady call of ElementA as follows:
class ElemenetA extends PolymerElement{
ElementB get _myElement => $["bid"];
onReady(){
ElementB item = new ElementB(); //item has an id of "bid"
Polymer.dom(this).childNodes.add(item);
}
}
So when i visit the Component, each time, it will add a new ElementB to the childNodes. Its ok, i will resolve this later.
The issue i have bumped into though is that ElementB doesnt render at all and if i try to call a method from it such as open like this: _myElement.open(); it will say null does not have method open.
What am i doing wrong to inject a PolymerElement into another?
My overall goal is to pull out a common element in a bunch of other Components and just use a behavior to inject this re-occurring item into the dom.
You can't access elements that are dynamically added using $[...], this works only for elements added statically to the elements HTML. Even when they are inside a <template is="dom-if"> or <template is="dom-repeat"> $[...] cant be used.
Use instead $$('#bid')
I have been using the answer from this
AngularDart: How to include subcomponents in a custom component template
Using something similar to this:
<tabs>
<tab>some tab content</tab>
<tab>another tab</tab>
</tabs>
My constructor for Tab is like
Tab(Tabs tabs) {
tabs.add(this);
}
This would let me create a "Tabs" component and add the child "Tab" to the a list of tabs in the the Tabs controller.
Up until AngularDart 0.14.0, but with 1.0 the component passed to the constructor of the child is now null and cannot be added to the parent.
Anyone know how to now achieve the same in AngularDart 1.0.0?
OK it turns out that the issue was more around the Scope being injected and also the fact that "Controllers" are now "Components", which means you have to set the templateUrl, or template html to render the content.
Simply replacing Controller with a Component wont work you need to shift all the html code to a template file.
I'm using ui.bootstrap.modal with a templateUrl. Within my template HTML, I have a "div" element that serves as a container for a third-party component (SlickGrid). When initializing my third-party component, I specify it's containing element using a jQuery selector expression. However, the selector can't seem to find my container element when executed from either within the modal's controller or within my 'opened' promise logic as resolved by modal. I believe the problem is that my dialog HTML hasn't yet been added to the DOM and thus isn't visible to the controller or 'opened' promise. I should add that the dialog itself renders just fine; it's just that I can't reference its container element from ... any context? Perhaps modal doesn't support this use-case? Any thoughts/suggestions would be appreciated!
Thanks, Garry
If i'm not mistaken your question.
You can use bs.modal.shown in your modal shown event
$(your-modal).on("bs.modal.shown",function(){});
I had this problem while using bootstrap-table inside a ui.boostrap.modal - when I initialize my modal, the selector wasn't able to find the <table> element & so couldn't be initialized itself.
The answer was to use the rendered promise, rather than opened. rendered resolves once the template has been added to the DOM, allowing you to select elements defined in the template as you would normally.
Below is a sample of how my implementation was done:
My View
<div ng-controller="MyAngularController" ng-init="init()">
<!-- The actual page content goes here - irrelevant to the example -->
<script type="text/ng-template" id="myngtemplate.html">
<table id="mygrid">
<!-- My bootstrap-table column definitions here -->
</tabie>
</script>
</div>
My JavaScript
// the below was implemented in my page's AngularJS controller,
// left out the controller implementation to make the example more consise
var modal = $uibModal.open({
animation: true,
size: 'lg',
templateUrl: 'myngtemplate.html'
});
modal.rendered.then(function () {
// $('#mygrid') could not find the table element before this
$('#mygrid').bootstrapTable({
data: getModalData()
});
});
I am new to working with knockoutjs so need some assistance around what I am trying to achieve and best practise.
I am working on an mvc4 application where I am calling a controller action that returns json and I am then binding it to my view model eg.
$.getJSON("/cart/summary", function (data) {
myModel = ko.mapping.fromJS(items);
ko.applyBindings(myModel , document.getElementById("my-container"));
});
The myModel view model is a direct representation of the json object returned from the controller.
The object contains a property (Prop1) which is an object and another property (Prop2) with a list of objects.
Prop1 object contains a decimal property that I would like to format as currency using the Globalize plugin. What is the best practise, should this be done in the viewmodel and binded to the view? If so, how can I extend my model to do this? Or done in the view?
I want to show a div if Prop2 has more than 0 items, ie. its not empty. Similar question again, should I return a property signalling this or do it in the markup?
I would like to bind a property to append text to a div, how is this done?
Finally, after binding is completed, I would like to animate the fact that binding is complete - dont care what the affect is, just like to know how its done?
Thanks for any feedback.
That's a lot of questions for one "question". I think I addressed them all.
If you want to use the globalize plugin, you will be best off doing the currency formatting client side. As a general rule of thumb, presentation logic should be done in the presentation layer anyway. Your business logic, and even other views may not want the currency formatting.
Again, following the same rule of thumb, the presentation layer is the thing that cares how many items your model object has. This can easily be accomplished with ko bindings.
http://knockoutjs.com/documentation/if-binding.html
<!-- ko if: listObjectName.length > 0-->
// put your div and list bindings in here
<!-- /ko -->
To append text to a div, you can bind to the text or html of a span depending on your exact goal.
http://knockoutjs.com/documentation/html-binding.html
To put an animation after the load is complete, you can use the afterRender event.
http://knockoutjs.com/documentation/template-binding.html#note_4_using_afterrender_afteradd_and_beforeremove
To summarize the article, you need to set up your template:
<div data-bind='template: { name: "personTemplate",
data: myData,
afterRender: myPostProcessingLogic }'> </div>
And then you can create the myPostProcessingLogic function on the myData viewmodel.
Here is a stackoverflow post on adding a glow effect on mouse hover or at set intervals. You care most about the technique used for the interval. Instead of doing it at set intervals, you would just do it whenever the myPostProcessingLogic is called.
How do I animate a glowing effect on text?
I've realised that I'm going to need to use a css class on all tables within my application.
<table id="tblSearch" class="eFoo-text"
The problem is that I've got lots of pages, which contain lots of user controls.
Luckly they all inherit from a single master page. Is there some way to say "use this class on all tables" somewhere in the master page??
In your CSS, you can use an element selector.
table{
padding:4px;
}
This is apply a padding to all tables without having to add a class or id to the markup.