I am using Emberjs and Gridsterjs to create some kind of editor. I found out that you need to make a component to include a jQuery plugin in Emberjs. Inside that component i have a number of components that will become the widgets for the Gridster.
this is how i've setup my templates:
<script type="text/x-handlebars">
{{#create-gridster}}
{{create-widget}}
{{/create-gridster}}
</script>
<script type="text/x-handlebars" data-template-name="components/create-gridster">
<button class="btn" {{action 'newWidget'}}>add widget.</button>
<section class="gridster-wrapper">
<div class="gridster">
<ul id="gridster-list">
{{yield}}
</ul>
</div>
</section>
</script>
Now i've created a button that allows the user to add a widget to the Gridster, but i can't seen to find a way to give the requested HTML string for the widget from the component.
I've tried this:
this.get('gridster').add_widget(Ember.Handlebars.compile('{{create-widget}}'));
and this:
this.get('gridster').add_widget(App.CreateWidgetComponent.create().createElement());
but that doesn't seen to work.
QUESTION
My question is how do i create the html string that gridster expects and keep the ember functionality for editting the content.
In myprettycms (myprettycms.codeplex.com) I use gridster to create layout, then to edit the content of the gridster li, I superpose a tiny mce on the slot and I transfert the content of the slot to tinyMCE instance.
When it's finish, I transfert TinyMCEContent in the slot.
See : http://myprettycms.codeplex.com/SourceControl/latest#MyPrettyCMSCommunityManager/Portals/MVC4Portal/Scripts/Views/DynaContentAdmin.js
Related
Ember automatically puts whatever you have in application.hbs inside a <div class='ember-view'>.
For example, if your application.hbs is:
<div class='wrapper'>
...
</div>
The resulting DOM in the browser will be:
<html>
<body>
<div id='ember345' class='ember-view'>
<div class='wrapper'>
...
</div>
</div>
</body>
</html>
That gives me a problem because the 3rd CSS I'm using depends on certain structure. To make it work, it has to be like this:
<html>
<body>
<div class='wrapper'>
...
</div>
</body>
</html>
So I need to tell ember **not** to wrap the content of application.hbs inside that <div id='ember345' class='ember-view'>. How to do that?
Before 1.13 you can make a view (following the naming convention), explained here: How do I customize the view element for the application.hbs template?
But now I'm using 1.13..., and there's no longer the notion of "View"..., and I don't want to use ember-legacy-view add-on (sounds like a step back to me).
Does anybody have a solution?
Thanks,
Raka
Oh... just figured out, you can still create a corresponding view in ember 1.13 (without having to use legacy-view).
I simply did (in ember-cli)
ember g view application
And edit the generated views/application.js to be like this (specify empty string as tagName):
import Ember from 'ember';
export default Ember.View.extend({
tagName: ''
});
I am creating an Ember app that manages a list projects and tasks for each project. In the app's navigation, I want to display the name of the selected project. If someone navigates to /projects/1/tasks, I want the page to display project 1's title, along with links to pages specific to that project. Here is what I have started for my application.hbs file of how I expected it to work, however the project title is blank and the links don't work:
<nav id="nav-menu">
<ul>
<li class='menu-project-title'>
{{#link-to 'projects'}}{{project.title}}{{/link-to}}
</li>
<li class='menu-separator'> </li>
<li>{{#link-to 'projects.tasks' project}}Tasks{{/link-to}}</li>
<li>{{#link-to 'projects.people' project}}People{{/link-to}}</li>
</ul>
</nav>
<div class="container" id='main-outlet'>
{{outlet}}
</div>
If I know every route will always have a project returned, what is the best way to pass that data into the application template?
You could use an Ember.computed.readOnly property in your application controller.
App.ApplicationController = Ember.Controller.extend({
needs: ['project'],
activeProject: Ember.computed.readOnly('controllers.project.model')
...
});
But maybe this isn't the best solution. As far as I understand it, the project route/template is always used? So why not move everything to that template.
Views in the app we're developing are already written in Handlebars / Emblem and data is already taken from models.
I'm trying to figure out what's the best approach for inline / inplace in Ember. Problem: when nothing is clicked, the data is just a text. When you click the text depending on its type (date, plain text, list of items) the corresponding input field (date field, text field or select) is replaced and you can edit it.
Have you had experience with this issue? If so, please share your thoughts!
Here is one solution using an Ember.Component:
App.InlineEditComponent = Ember.Component.extend({
actions: {
toggleEditing: function() {
this.toggleProperty('isEditing');
}
}
});
With the template:
<script type="text/x-handlebars" id="components/inline-edit">
{{#if isEditing}}
<form {{action "toggleEditing" on="submit"}}>
{{yield}}
</form>
{{else}}
<span {{action "toggleEditing"}}>
{{value}}
</span>
{{/if}}
</script>
Usage:
<script type="text/x-handlebars" data-template-name="index">
{{#inline-edit value=someProperty}}
{{input value=someProperty type="date"}}
{{/inline-edit}}
</script>
Demo: http://emberjs.jsbin.com/OGEnOdA/2/edit
You can add more features (for example, end editing on focus-out the form element, etc.) but I think you get the basic idea.
So I have a page which looks like the following
[ Nav Bar ]
| |
| Content |
| |
The nav bar I want to be constant across all pages. So the approach I used was to set my page up as follows:
[ Nav Bar ]
{{outlet}}
This is great, I can now render different pages into my outlet for different routes.
But what if I want a default template to be rendered into the outlet for my home page?
I've managed to achieve this by redirecting / to /home, but there must be a better way to do this which allows me to render a default home page at / without re-routing?
Any advice appreciated,
Thanks,
Daniel
To render stuff in the {{outlet}} at the root page /, you have to define a handlerbar script for index:
Your navbar code probably look like this:
<script type="text/x-handlebars">
<div class="navbar ...">
...
</div>
{{outlet}}
</script>
The root page that will be place inside {{outlet}} is the fallowing:
<script type="text/x-handlebars" id="index">
<div class="container">
<h1>Root page!!</h1>
</div>
</script>
In other words, you have to create a handlebar script that will have an id="index".
Should work. It doesn't need any js code to work.
I must admit this property is not well documented and buried in the docs for Ember.View but you could try setting the defaultTemplate property on your ApplicationView. See here for more info on that (search in the page for 'defaultTemplate').
Hope it helps.
The following statement in docs helped me to solve exactly the same problem I was having which is stated in the question:
Ember routing docs
The index template will be rendered into the {{outlet}} in the application template. If the user navigates to /favorites, Ember will replace the index template with the favorites template.
As I am using pod structure in my project, I created an index route having my default template and I placed nav-bar component in my application/template.hbs file.
app/application/template.hbs:
<div id="pageWrapper">
<div id="navbarfixed">{{nav-bar options=options}}</div>
<div id="pageContent">
{{outlet}}
</div>
</div>
app/index/template.hbs
<div id="homeWrapper"> <!--This gets rendered by default in outlet above-->
Some default content of outlet
</div>
I have a header with some login/signup forms that popup when you click the respective buttons.
While it was working fine using just jQuery, I've now started to integrate Ember into the application and I'm running into some trouble with some simple toggle functionality.
Here's the basic HTML markup:
<header>
<h1>Page Title<h1>
<nav>
<a id="toggles-login" class="button {{active_class_binding}}">Login</a>
<a id="toggles-signup" class="button {{active_class_binding}}">Signup</a>
</nav>
<div id="popup-forms">
<div id="login-form"></div>
<div id="signup-form"></div>
</div>
<header>
I'm completely new to Ember and I really have no idea how to set this up. The only thing I want is to be able to set the popup forms up as Ember.View objects and toggle them with some action helpers.
I really am lost on this one.
A simple solution would be to trigger simple actions to show the respective forms:
<a id="toggles-login" class="button {{active_class_binding}}" {{action showLoginForm target="view"}}>Login</a>
<a id="toggles-signup" class="button {{active_class_binding}}" {{action showSignupForm target="view"}}>Signup</a>
The corresponding view would have to implement both actions:
App.YourView = Ember.View.extend({
showLoginForm : function(){
this.$("#login-form").toggle();
},
showSignupForm : function(){
this.$("#signup-form").toggle();
}
});