js:
Ember.Handlebars.registerHelper('demo-helper', function (property, options) {
console.log('demo helper');
return '<li><a> '+ msg+'</a></li>';
});
hbs :
{{#demo-helper}} msg {{/demo-helper}}
How can I wrap hi (inner html of handlebar) with any custom tag?.I know that component has tag parameter that encapsulates html with given tag. But it supports only one tag. I want to encapsulate with multiple tags like
<li><a>innerhtml</a></li>
This is what components are for. They have can have an arbitrarily sized template. You can use {{yield}} to nest other html inside the component.
See https://guides.emberjs.com/v2.15.0/components/wrapping-content-in-a-component/.
component template:
<div><div><div>{{yield}}</div></div></div>
usage:
{{#my-component}} Hello world {{/my-component>}}
Components are very powerful and have many other options, see the guides for more info. They are the best resource.
Related
I was wondering how I could pass a link into to {{t}} helper. I am using v3.0.1 of Ember i18n at the moment.
Obviously you cannot pass a link helper into a t helper (something like
{{ t "some-translation-string" link={{#link-to 'page' model}}page{{/link-to}} }}
won't work of course).
So I was thinking, maybe I can create a custom prop that returns a whole link. But then again, how do I create that link?. Does anyone know of a method that has the same arguments as the link-to helper, but returns just the link (In my case 'page' and model)?
You might be able to achieve that with a basic link, but I doubt that you'll be able to toss a live link-to component inside a translation.
So instead split your translation string into pieces:
{{t 'goToSettingPage-before'}}
{{link-to (t 'goToSettingPage-link') 'route.name'}}
{{t 'goToSettingPage-after'}}
'goToSettingPage-before': 'Go to'
'goToSettingPage-link': 'settings'
'goToSettingPage-after': 'page.'
You can create a helper to do exactly what you want using ember-href-to.
Helper:
compute (params) {
const i18n = this.get('i18n');
const target = hrefTo(this, params[1]);
// const targetParam = params[2]; //dynamic segment
const text = i18n.t(params[0]);
return Ember.String.htmlSafe('<a href='+ target +'>' + text +'</a>');
}
Template usage:
{{t "linkExample-learnMore" link=(helper-name 'linkExample-here' 'some.route')}}
Translations:
"linkExample-learnMore": "Click {{{link}}} to do something",
"linkExample-here":"here"
I am creating an Ember.Component which displays a CRUD table. As the component shall be reusable it needs a lot configuration, such as columns to display, pagination options, etc. ...
At the moment I am inserting the component using handlebars:
<div class="some-div">
{{power-table items=this.model columns='...'}}
</div>
I wouldn't want to use this nice way of inserting a component. However, it is pot really possible to extensively configure a component here, is it? I found out it's not even possible to pass an object as parameter, e.g. the following it not possible:
<div class="some-div">
{{power-table items=this.model columns=[id, name, foo, bar] }}
</div>
How and where should I configure the component?
What you can do is that instead of setting columns=[id,name,foo,bar] in the handlebar like this:
<div class="some-div">
{{power-table items=this.model columns=[id, name, foo, bar] }}
</div>
You can set the columns property in the controller for the handlebar template and use the name of the property in the handlebar file. So all the logic would come from the controller and the handlebar would just tell which property is accessible in the component and by what name. So the controller for the enclosing template would be the best place to heavily configure the component. Have a look at the following page for more info:
http://emberjs.com/guides/components/passing-properties-to-a-component/
I am not sure if I understood your problem correctly.
I'm beginning to use Marionette within an existing backbone application. I've got some HTML which I want to append into a region. In pure backbone, I could just do this.$el.append(html_code) and that was all. As far as I can see, marionette regions allow only to operate on views (which have to implement the render method). Calling append on marionette region throws 'undefined method' errors.
Is it possible to attach plain HTML to a marionette region?
No, it's not possible to inject plain html into a Marionette.Region.
Theoretically you could access a regions DOM element with someRegion.el or someRegion.getElement(), but this must be done after rendering (which at least isn't possible inside a Marionette.View with standard behaviour).
But you can achieve the desired result by using a specially crafted Marionette.ItemView:
#someRegion.show(new Marionette.ItemView({template: '<h1>gach</h1>'}));
You maybe also should have a look at Marionette.Renderer .
a Marionette ItemView will look for a template and will call render on that template, so when you show the view in the region the html will be displayed just fine with out the need of you defining a render method.
MyImtemView = Backbone.Marionete.ItemView.extend({
template : "#myTemplate"
});
var myItemView = new MyItemView();
myLayout.aregion.show(myItemview);
this should work if you save your html in a template like this
`<script id="myTemplate" type="text/template">
<div><p>your html<p>
</div>
`
EDIT
you can also declare a render function in your view in case you need to generate and modify your html like this.
MyImtemView = Backbone.Marionete.ItemView.extend({
template : "#myTemplate",
render : function (){
this.$el.append(HMTL); //so here you work your html as you need
}
});
var myItemView = new MyItemView();
myLayout.aregion.show(myItemview); //the render function of your view will be called here
I ran into the same problem and tried the answers explained here, but I'm also using require.js and kept getting an error for the #my_view template not being found. If anyone can clarify where does Marionette look up the templates by default, that would be great.
Instead, I solved it by using the text.js plugin for underscore.js. This way you actually can use a plain html file as the template, without the need for nesting it in a script tag. Here's how I did it.
define(['backbone', 'underscore', 'marionette', 'text!tmpl/my_view.html'], function(Backbone, _, Marionette, view_t){
var MyView = Backbone.Marionette.ItemView.extend({
template : function(serialized_model) {
//define your parameters here
param1 = erialized_model.param1;
return _.template(view_t)({
param1: param1
});
}
});
return MyView;
});
I placed the text.js plugin in the same lib directory as all my other js libraries and my main.js for require declares the path to the templates as
'tmpl': '../../templates',
My project structure looks like this
root
index.html
js
main.js
app
App.js
views
MyView.js
lib
require.js
text.js
backbone.js
underscore.js
jquery.js
backbone.marionette.js
templates
my_view.html
My template 'my_view.html' simply looks like this.
<h1>THIS IS FROM THE TEMPLATE!!!</h1>
Worked perfectly. I hope you find it useful.
Using a view
var myHtml = '<h1>Hello world!</h1>';
var myView = new Marionette.ItemView({template: _.constant(myHtml)});
myRegion.show(myView);
Marionette.Renderer.render takes either a function or the name of a template (source code). _.constant creates a function that returns the passed-in parameter.
Attaching HTML
Alternately, the docs for Marionette.Region mention overriding the attachHtml method, see Set How View's el Is Attached.
I'm trying to create a website with articles. I have a page that displays a list of all the articles, and I try to do one that displays the detail of an article. I use angular.js to get the json of my datas. I don't have any problem to get the list of my articles since I only need to do :
function ArticleListCtrl($scope, $http) {
$http.get('/articles/?format=json').success(function(data) {
$scope.articles = data;
});
}
But now I only want to access for example the article with id 4. How do I do that ? Is there a way to inject the primary key entered in the url into the javascript ? I'm new to angular, and I'm pretty sure there is an easy way!
If I understand correctly, what you need is to define a partial template and a route,
for the detail view of your article.
An example is here
More specifically what you'd need is something like the following.
angular.module('myapp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/articles/:articleId', {templateUrl: 'partials/article-detail.html', controller: ArticleDetailCtrl}).
otherwise({redirectTo: '/articles'});
}]);
What the above does, is to hijack urls of the form /articles/5/ and instead of actually
performing that GET request to your server, it will just ask for partials/article-detail.html. This of course will be your article detail template, which will be handled
by your ArticleDetailCrtl controller.
In your ArticleDetailCrtl controller function, don't forget to include the $routeParams
service. This will give you access to the url parameters, such as articleId, which we
defined above.
The final thing to do is to generate these links in your article list template. e.g:
<ul>
<li ng-repeat="article in articles">{{article.title}}
</ul>
Is there a way to strip binding tags from an ember.js infused handlebars template? I would like to be able to extract just the html without any of the metamorph script tags.
I have this related question but wanted to ask this more general question as well.
You can use the unbound Handlebars helper to do this at the individual property level.
There is work being done on an #unbound block helper, which would be nice for what you're trying to do: https://github.com/emberjs/ember.js/pull/321
Another approach is to, in your views, specify a plain Handlebars template. None of the output will be bound.
App.UnboundView = Ember.View.extend({
template: Handlebars.compile("output is: {{msg}} here"),
msg: "not bound"
});
Here's a jsFiddle example: http://jsfiddle.net/ebryn/zQA4H/
Here's a better way
{{unbound propertyName}}
http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_unbound
In case anyone needs this functionality, I created a small jquery plugin to do it:
# Small extension to create a clone of the element without
# metamorph binding tags and ember metadata
$.fn.extend
safeClone: ->
clone = $(#).clone()
# remove content bindings
clone.find('script[id^=metamorph]').remove()
# remove attr bindings
clone.find('*').each ->
$this = $(#)
$.each $this[0].attributes, (index, attr) ->
return if attr.name.indexOf('data-bindattr') == -1
$this.removeAttr(attr.name)
# remove ember IDs
clone.find('[id^=ember]').removeAttr('id')
clone
Still hoping there is a better way.