I am completely new for ember mobile application.
I am trying to crate tab but i am not able to do it.
my .hbs file
<div class="tabpanel">
<div class="tabs">
<div {{action "goToFirstTab"}}>First tab</div>
<div {{action "goToSecondTab"}}>Second tab</div>
</div>
{{outlet}}
</div>
I have done tab with like when i tapped on it it will go at another screen.
I need it like when i will tap on tab it should be on same screen i.e. toggling.
Thanks in Advance.
I would recommend you to use nested routes for this.
So this is your router:
this.route('tabbing', function() {
this.route('tab1');
this.route('tab2');
});
and then in your tabbing.hbs:
<div class="tabpanel">
<div class="tabs">
{{#link-to 'tabbing.tab1' tagName="div"}}First tab{{/link-to}}
{{#link-to 'tabbing.tab2' tagName="div"}} Second tab{{/link-to}}
</div>
{{outlet}}
</div>
You put the tab content in your subroutes. So tab1.hbs and tab2.hbs. So the content of tabbing.hbs will always be present and the content of tab1 and tab2 will be toggled.
Here are some resources & addons about implementing Tabs in Ember :
ivy-tabs addon: tabs without routing (selecting a tab does not transition to route)
bootstrap-for-ember addon: a (very) more complete addon with tabs support (with and without routing)
IMHO using routes is always a best choice.
Here is also a more complete discussion about implementing Tabs with routes in Ember : http://discuss.emberjs.com/t/tabbed-ui-with-routing/7336
Hope it helps
Related
<div class="flex">
<div class="layout-row layout-align-end-center">
{{#paper-button href="overview" raised=true primary=true}}Overview{{/paper-button}}
{{#paper-button href="incomes"}}Incomes{{/paper-button}}
{{#paper-button href="expenses"}}Expenses{{/paper-button}}
{{#paper-button href="settings"}}Settings{{/paper-button}}
</div>
</div>
So I am trying to set the raised=true whenever I am on certain page/template. The above code is from my application template. Is there any way of doing this using JS/Ember or should I just do it manually in each of my templates?
I think the best way to go is to write a custom component wrapping paper-button. ember-route-helpers gives you nice helpers to do that:
{{#paper-button
onclick={{transition-to #route)
href=(url-for #route)
raised=(is-active #route)
primary=(is-active #route)
}}
{{yield}}
{{/paper-button}}
Then you can use that component with {{#your-component route="settings"}}Settings{{/your-component}}.
It's important to understand that you should pass both the action and the href. Because then when people click on the button it will make a transition and dont reload the entire page, but rightlick->open and screenreaders are are not broken.
I have 2 list of items say, news and people.
These 2 lists have different logic and are located in different pages, so don't share shame ng-app:
<!-- News.html -->
<div id="newsList" ng-app="newsListApp">
<div id="{{news.id}}" ng-app="modalApp" ng-repeat="news in newsList">
...
</div>
</div>
<!-- People.html -->
<div id="peopleList" ng-app="peopleListApp">
<div id="{{person.id}}" ng-app="modalApp" ng-repeat="person in people">
...
</div>
</div>
I need to open each item in a modal popup, so I have to use a modalApp, but I want to use the same modalApp(that will use the same popup template) in the news and people lists...
What is the concept of sharing angular application/modules in cases like this?
You can't do it using ng-app. You have to manually bootstrap at least one of them. See this question for more info.
I think you are mixing up ng-app and ng-controller. Probably you are looking for something like this. In general angular only expects one app per page, and they certainly shouldn't be nested
<body ng-app="myApp">
<div id="newsList" ng-controller="newsListCtrl">
<div id="{{news.id}}" ng-controller="modalCtrl" ng-repeat="news in newsList">
...
</div>
</div>
<div id="peopleList" ng-controller="peopleListCtrl">
<div id="{{person.id}}" ng-controller="modalCtrl" ng-repeat="person in people">
...
</div>
</div>
</body>
https://docs.angularjs.org/api/ng/directive/ngController
Edit:
If news and people are different pages then you need a router of some kind. Your main options are ngRoute or ui-router. I think ui-router is more flexible to I would go with that. Couple of useful links that might help out:
https://scotch.io/tutorials/angular-routing-using-ui-router
http://plnkr.co/edit/dd8Nk9PDFotCQu4yrnDg?p=preview
I've created a site that has multiple panels that slide in from the right side of the screen.
I want to be able to put a link on each panel that will share my webpage, and when the user comes to the site, that specific panel will be open.
For example:
www.something.com/#/panel-1
Will show my page with panel-1 opened, while:
www.something.com/#/panel-2 will show my page with panel-2 opened.
What's the easiest way to do this? Can I use Ember,Angular, or Backbone's router and views with only simple html? Should I just use something like router.js?
Any help, advice, or links would be appreciated.
Of course you can do that. That's the one of the strongest qualities of ember.js. After declaring your routes, framework can generate all the corresponding controllers and views automatically (it's called convention over configuration). See an example
Ember.Application.create({});
Ember.Router.map(function(){
this.route('panel1');
this.route('panel2');
});
<script type="text/x-handlebars">
{{link-to 'index' 'index'}}
{{link-to 'first panel' 'panel1'}}
{{link-to 'second panel' 'panel2'}}
<!--your panels will be inserted automatically in the outlet property-->
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="panel1">
panel 1
</script>
<script type="text/x-handlebars" data-template-name="panel2">
panel 2
</script>
Demo: http://jsbin.com/dekixayuxa/1/
It doesn't seem possible to extend the view for mobile. I would like to do so because I can predefine some options and behavior. I have create a sample here illustrating the problem, which gives me an error of:
Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.
JavaScript:
kendo.mobile.ui.plugin(kendo.mobile.ui.View.extend({
init: function (element, options) {
kendo.mobile.ui.View.fn.init.call(this, element, options);
},
options: {
name: 'ViewCustom'
}
}));
$(function () {
new kendo.mobile.Application(document.body);
});
HTML:
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">My App</div>
</header>
<footer data-role="footer">
<div data-role="tabstrip">
Home
</div>
</footer>
</section>
<div id="home" data-role="viewcustom" data-layout="default">
Welcome to the home page!
</div>
http://jsfiddle.net/basememara/67RZN/
Kendo support simply said it's not supported - the mobile application does not recognize the descendants and does not initialize them upon start. This is a huge extensibility roadblock for mobile, so I've been poking around the source code to see where this is hard coded and I think the change will be somewhere in ViewEngine in kendo.mobile.view, possibly in _hideViews. I also see some hard coded views in kendo.mobile.pane. So I think this will be a big hack of the source code to get it working.
My question is there a way to extend the view without creating a new class, such as using prototype to extend kendo.mobile.view? Any help, experience, or insight will be greatly appreciated!
Instead of relying on Kendo to find the initial view to display, which will search specifically for data-role="view" you can instead programmatically tell it the initial view:
new kendo.mobile.Application(document.body, {
initial: "home"
});
I updated your example (and clicking the "Home" button also navigates to a second view just to make sure that worked as well).
I am building an Angular app and hitting a bit of a snag in how to handle the home page. The home page is 90% different - only the header stays the same - in there I have directives that show user login state for ex.
To make use of routing/templates etc I'd ideally like to have my ngview in the white area of sample shown - that all works fine - just not sure how to build the home page. It doesn't need an ngview area persay since it's the only one of it's kind. I don't want to make it as a second apps however as that seems wasteful and would reload everything.
Googling this brings up suggestions of replacing the white area with a directive but then I think I would lose the whole routing/template benefit.
Alternatives I have seen have code to determine if on home and load a body CSS class etc but that is not ideal either as the content is so different.
UI Router is a possibility but I'd like to avoid prebeta stuff if possible.
Suggestions?
You could have this:
index.html:
<body>
...header..
<div ng-if="isHomePage()">
<div ui-view></div>
</div>
<div ng-if="!isHomePage()">
<div ng-include="'shell.html'"></div>
</div>
...footer..
</body>
home.html (with route '/')
...your home page html...
shell.html (any route different than '/')
<div>
<div>
<div ui-view></div>
</div>
<aside><aside>
</div>
finally, add isHomePage() to your root scope
$rootScope.isHomePage = function() {
return $location.path() == '/';
};