is it possible to specify a custom element tag for the .dragList ? In my scenario right now I need it to be a <ul> as I'm rendering my items wrapped inside of <li> - trying to avoid having to create a fork.
something like this...
= drag-sort-list [
tagName="ul"
childTagName="li"
class="someClass"
]
and instead of default rendering a for the list we could render the tagName passed in - would also be nice to be able to pass down a custom class for the parent list as well
You can configure tag names of both drag-sort-list and drag-sort-item components:
{{#drag-sort-list
tagName = "article"
childTagName = "section"
}}
tagName is built into every Ember component.
childTagName is described in the addon's readme.
Related
Summary
I want to continue to use nested routes but without displaying top level content when the nested route is accessed. I'm not sure this is possible ?
Detail
Initially my requirement was to to display a list of, eg, foods and offer the user the option to add a food item foods/add . Using the outlet tag at the top of the list template allowed a form to add a food item to become visible at the top of the list, transitioning back to food after the add resulted in the list being displayed without the form.
New Requirement
The requirement has now changed and it's necessary to show the form without the the contents of the list and after a succesful add show the list without any form.
Question
I know I could abandon the sub-routes approach and create a route such as food-add but is there any other way of preserving the sub-route (and the corresponding file structure, which I like) but allow the the template for foods/add to be rendered without the list content ?
Each route has an index template which is only visible when a child route is not present.
You could do something like this:
index.hbs
{{#each foods as |food|}}
{{food}}
{{/each}}
<LinkTo #route="food.add">Add</LinkTo>
food/add.hbs
<form>
...
</form>
{{!-- submitting this form would add the new food to the list of foods
and then also transition back to `food` --}}
Here is some more info on how the index route works
https://guides.emberjs.com/release/routing/defining-your-routes/#toc_nested-routes
https://guides.emberjs.com/release/routing/defining-your-routes/#toc_index-routes
Consider this mockup of my intended output:
The data structure behind this in a Mongo DB looks like this - I did not nest the subcategories inside the document because I still want to be able to update subdocuments atomically - and I also want to allow a dynamic amount of layers below. From what I've seen, Mongo currently does not allow for easy, dynamic access of nested documents.
topmost_category = {
_id : "foo",
category_name : "Example",
parent_category: null,
subcatories: [ "sub_foo1", "sub_foo2", ... ]
}
child_category = {
_id = "sub_foo1",
category_name : "Example 2",
parent_category: "foo",
subcategories: []
}
The underlying HTML consists simply of nested -branches. The currently selected category gets an "active" class, and the icons in front are named "icon-folder-close" and "icon-folder-open" (<i class="icon-folder-close"></i>).
Now, I could use the answer to this to create a complete tree-like structure. However, all the branches would be "open". How do I make it so that only the currently selected branch is visible like shown in my mockup (and still have it reactive to boot)?
You can see the implementation of a very similar approach to that described by Hubert here:
http://www.meteorpedia.com/read/Trees
It's the code to the (working) category browser functionality of the wiki (you can see a demo there).
The main difference to Hubert's answer is that it uses a publish/subscribe with a session variable to fetch the data of opened children in real time.
The easiest way would be to add a boolean flag for branches denoting whether or not they belong to current path, and therefore should be open.
<template name="branch">
{{#if open}}
<div class="openBranch">
...
{{#each children}}
...
{{/each
</div>
{{else}}
<div class="closedBranch">
...
</div>
{{/if}}
</template>
Now, the setting and management of this flag depends on the logic of your application. Where do you store the currently selected branch?
I assume the state is limited to a single client. In this case, one solution is to:
maintain an array of opened branches ids, scoped to a single file,
implement the open flag as a helper:
Template.branch.open = function() {
return _.indexOf(openedBranches, this._id) !== -1;
}
when user changes selection, clear the array and populate it with path from the selected branch to the top.
When I render a form, it generates something like this for each Field:
<div class="field_content">
<label>...</label>
<div class="field">...</class>
</div>
I would like to be able to uniquely identify each Field in my stylesheet. Is there a way to add another class to the outer div (in addition to field_content), or an outer div (parent to field_content)?
If it's enough to set the class of the field you can specify it as an attribute of your widget:
name = forms.CharField(widget=forms.TextInput(attrs={'class':'special'}))
If you need more control it's probably best to render your form manually or if you don't mind relying on an external app there are even more flexible solutions:
In django-floppyforms you could use form layouts and in django-crispy-forms you could use layout objects and to achieve what you want.
I am trying to use ember to show a dynamic list of found content. The problem is that when I try to put handlebars in html attributes, everything breaks.
RegApp.PatronsFound = Ember.CollectionView.create
tagName: 'table'
content: []
itemViewClass: Ember.View.extend
template: Ember.Handlebars.compile("<td><button onclick='alert({{content.id}})'>{{content.name}}</button>")
RegApp.PatronsFound.appendTo('body')
When it is fed a piece of content with the ID of 3 and the name FOO, I want this html to be generated:
<button onclick="alert(3)">FOO</button>
Instead, I get this:
<button onclick="alert(<script id=" metamorph-4-start'="" type="text/x-placeholder">3<script id="metamorph-4-end" type="text/x-placeholder"></script>)'>FOO</button>
You can use
{{unbound content.id}}
to arbitrarily insert values into your templates. Normally, such values are wrapped in metamorph tags which allow the displayed value to be bound to the backing value, and updated whenever the backing value changes. This only works if the output is regular HTML, not, in this case, spanning event handlers and embedded JS. {{unbound}} inserts the value at that property path once, without metamorph tags, and without being updated if that value changes in the future.
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.