We Keep Coding

Dojo _hasDropDown - How do I declaratively bind the properties?

ExpandableSearchComponent.html:
<div class="${baseClass}">
<div data-dojo-type="dijit/_HasDropDown" data-dojo-props="dropDown: 'containerNode'">
<div data-dojo-type="dijit/form/TextBox"
name="${SearchViewFieldName}Textbox"
class="${baseClass}Textbox"
data-dojo-props="placeholder:'${fieldName}'"></div>
<div class="${baseClass}Container" data-dojo-attach-point="containerNode"></div>
</div>
</div>
ExpandableSearchComponent.js:
/**
* Javascript for ExpandableSearchComponent
*/
define([ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin",
"dojo/text!./templates/ExpandableSearchComponent.html",
"dijit/form/TextBox", "dijit/_HasDropDown" ], function(declare,
_WidgetBase, _TemplatedMixin, template, TextBox) {
return declare([ _WidgetBase, _TemplatedMixin ], {
templateString : template,
SearchViewFieldName : "",
fieldName : ""
});
});
Intended to be used like this:
<div data-dojo-type="js/widgets/ExpandableSearchComponent"
data-dojo-props="SearchViewFieldName: 'machineSearchView.name', fieldName: 'Name:'">
<div data-dojo-type="dojo/store/Memory"
data-dojo-id="machineNameStore"
data-dojo-props="<s:property value='%{getNameJsonString()}'/>"></div>
<s:set name="MachineName" value="machineSearchView.name"
scope="request"></s:set>
<div data-dojo-type="dijit/form/ComboBox"
data-dojo-props="store:machineNameStore, searchAttr:'name', value:'${MachineName}'"
name="machineSearchView.name" id="machineSearchView.name"></div>
</div>
The intent is:
The user at first only sees the textbox with the placeholder.
When they click it, the containerNode expands and shows what's inside the containerNode, which can either be a dijit/Select, a dijit/form/ComboBox or a dijit/form/FilteringSelect. The internal element is also automatically expanded.
The user selects a value in the internal select, which then gets modified a bit so it's shown in the TextBox as ${fieldName}:${value}.
The data that's eventually processed by the server is the value of the internal element.
The problem I'm currently facing is that I have no idea how to make the _HasDropDown work properly as mentioned above. It renders the TextBox as an element with height 0 and then immediately shows the internal element. I'm not sure how to bind the internal nodes for it to work like a dropdown should work.

dijit/_HasDropDown is a mixin to add dropdown functionality to a widget by inheritance. It is not intended to be used as a widget, especially in declarative markups.
dijit/_HasDropDown is a dijit widget mixin that provides drop-down
menu functionality. Widgets like dijit/form/Select,
dijit/form/ComboBox, dijit/form/DropDownButton, and
dijit/form/DateTextBox all use dijit/_HasDropDown to implement their
drop-down functionality.
Please refer this document on how to use dijit/_HasDropDown. http://dojotoolkit.org/reference-guide/1.10/dijit/_HasDropDown.html
define([ "dojo/_base/declare", "dijit/form/Button", "dijit/_HasDropDown" ],
function(declare, Button, _HasDropDown){
return declare([Button, _HasDropDown], {
isLoaded: function(){
// Returns whether or not we are loaded - if our dropdown has an href,
// then we want to check that.
var dropDown = this.dropDown;
return (!!dropDown && (!dropDown.href || dropDown.isLoaded));
},
loadDropDown: function(callback){
// Loads our dropdown
var dropDown = this.dropDown;
if(!dropDown){ return; }
if(!this.isLoaded()){
var handler = dropDown.on("load", this, function(){
handler.remove();
callback();
});
dropDown.refresh();
}else{
callback();
}
}
});
});

Backbone/Marionette: Adding view events to a dynamically added view for a bootstrap modal

I've got a Marionette layout and for demo purposes the html looks like:
<header id="header-region" class="page-title"></header>
<section id="template-content" class="full-section">
<div id="error-messages" class="fade main-section"><!-- errors --></div>
<div id="content-region"> </div>
</section>
Its layout view's regions are:
regions: {
header: "#header-region",
content: "#content-region"
}
Up until now, I've had any given page's modal html inside the page's template html which would be contained in the content region.
I have an idea to now create a separate region for modals to be shown in.
Changing things to look like this:
Template:
<section id="template-content" class="full-section">
<div id="error-messages" class="fade main-section"><!-- errors --></div>
<div id="content-region"> </div>
<div id="modal-region"></div>
</section>
And the region:
regions: {
header: "#header-region",
content: "#content-region",
modal: "#modal-region"
}
So I'd like to be able to do something like this:
// Controller
define([], function(){
initialize: function(){},
showHeaderView: function(){
this.HeaderView = new HeaderView();
this.layout.header.show(this.HeaderView);
},
showContentView: function(){
// this.BodyView's template used to contain the modal html
this.BodyView = new BodyView();
this.layout.content.show(this.BodyView);
},
showModalView: function(){
this.ModalView = new ModalView();
this.layout.modal.show(this.ModalView);
}
});
This works and renders the modal properly but the modal's events are lost because they were originally set by this.BodyView.
The modal has a checkbox that on change runs a function that is on this.BodyView but I want to bind the events for this.ModalView from this.BodyView.
How can I accomplish that? I've tried making this.ModalView's el the same as this.BodyView's but that breaks things. I've tried to use delegateEvents as well but with no luck.

This screencast does exactly what you want: http://www.backbonerails.com/screencasts/building-dialogs-with-custom-regions
Code is here: https://github.com/brian-mann/sc01-dialogs

If you are having the HeaderView as ItemView(or CollectionView/CompositeView) in it, you can instantiate it with passing arguments like
new HeaderView({events:{
"click .x" : function(){} // your function in-line or reference
});
So same applies to ModalView.

Marionette.js - can I detect onAppend?

I have a silly problem, where my only solution is a sloppy hack that is now giving me other problems.
See my fiddle,
or read the code here:
HTML:
<input id='1' value='input1' />
<template id='template1'>
<input id='2' value='input2' />
</template>
JS - Item View Declaration:
// Declare an ItemView, a simple input template.
var Input2 = Marionette.ItemView.extend({
template: '#template1',
onRender: function () {
console.log('hi');
},
ui: { input2: '#2' },
onRender: function () {
var self = this;
// Despite not being in the DOM yet, you can reference
// the input, through the 'this' command, as the
// input is a logical child of the ItemView.
this.ui.input2.val('this works');
// However, you can not call focus(), as it
// must be part of the DOM.
this.ui.input2.focus();
// So, I have had to resort to this hack, which
// TOTALLY SUCKS.
setTimeout(function(){
self.ui.input2.focus();
self.ui.input2.val('Now it focused. Dammit');
}, 1000)
},
})
JS - Controller
// To start, we focus input 1. This works.
$('#1').focus();
// Now, we make input 2.
var input2 = new Input2();
// Now we 1. render, (2. onRender is called), 3. append it to the DOM.
$(document.body).append(input2.render().el);
As one can see above, my problem is that I can not make a View call focus on itself after it is rendered (onRender), as it has not yet been appended to the DOM. As far as I know, there is no other event called such as onAppend, that would let me detect when it has actually been appended to the DOM.
I don't want to call focus from outside of the ItemView. It has to be done from within for my purposes.
Any bright ideas?
UPDATE
Turns out that onShow() is called on all DOM appends in Marionette.js, be it CollectionView, CompositeView or Region, and it isn't in the documentation!
Thanks a million, lukaszfiszer.

The solution is to render your ItemView inside a Marionette.Region. This way an onShow method will be called on the view once it's inserted in the DOM.
Example:
HTML
<input id='1' value='input1' />
<div id="inputRegion"></div>
<template id='template1'>
<input id='2' value='input2' />
</template>
JS ItemView
(...)
onShow: function () {
this.ui.input2.val('this works');
this.ui.input2.focus();
},
(...)
JS Controller
$('#1').focus();
var inputRegion = new Backbone.Marionette.Region({
el: "#inputRegion"
});
var input2 = new Input2();
inputRegion.show(input2);
More information in Marionette docs: https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.region.md#region-events-and-callbacks

Well, I managed to solve it by extending Marionette.js, but if anyone else has a better idea that doesn't involve extending a library, I will GLADLY accept it and buy you a doughnut.
// After studying Marionette.js' annotated source code,
// I found these three functions are the only places
// where a view is appended after rendering. Extending
// these by adding an onAppend call to the end of
// each lets me focus and do other DOM manipulation in
// the ItemView or Region, once I am certain it is in
// the DOM.
_.extend(Marionette.CollectionView.prototype, {
appendHtml: function(collectionView, itemView, index){
collectionView.$el.append(itemView.el);
if (itemView.onAppend) { itemView.onAppend() }
},
});
_.extend(Marionette.CompositeView.prototype, {
appendHtml: function(cv, iv, index){
var $container = this.getItemViewContainer(cv);
$container.append(iv.el);
if (itemView.onAppend) { itemView.onAppend() }
},
});
_.extend(Marionette.Region.prototype, {
open: function(view){
this.$el.empty().append(view.el);
if (view.onAppend) { view.onAppend() }
},
});

My fake case statement in Emberjs is blowing up. What's the right way?

I'm trying to render a different handlebars template based on the current value of a property in my model, and there could be quite a few options (hence I'd rather not use a lot of {{#if}}s). The best thing I can think of is this:
Ember.Handlebars.registerBoundHelper('selectorType', function(name, options) {
return Ember.Handlebars.compile("{{template _selectors_" + name + "}}")(options.contexts[0], options);
});
And I use that in my template like:
{{selectorType selector.name}}
(instead of like a hundred {{#if}}s)
The problem is that I get this error during render: "You can't use appendChild outside of the rendering process"
Clearly I'm doing something wrong. What's the right way to do this?

I don't think there's any need to create a helper to do this. You can do it from within the view by modifying the templateName and then calling the rerender method once you've changed its templateName:
init: function() {
this.set('templateName', 'firstOne');
this._super();
},
click: function() {
this.set('templateName', 'secondOne');
this.rerender();
}
We can use the init method for setting the empty templateName before the template has been rendered. We'll then call the _super method to complete the insertion of the view into the DOM. We can then trigger the change of the view on the click event. We update the templateName variable and then call rerender() to re-render this particular view.
I've set you up a JSFiddle as an example: http://jsfiddle.net/pFkaE/ try clicking on "First One." to change the view to the secondOne.

I ended up solving this using a ContainerView with dynamic childViews, see Ember.js dynamic child views for a discussion on how.
The relevant code is (coffeescript):
App.SelectorType = Ember.Object.extend
name: null
type: null
typeView: null
options: null
App.SelectorTypes = [
App.SelectorType.create(
name: 'foo'
type: 'bar'
) #, more etc
]
App.SelectorTypes.forEach (t) ->
t.set 'typeView', Ember.View.create
templateName: "selectors/_#{t.get('viewType')}_view"
name: t.get('name')
App.SelectorDetailView = Ember.ContainerView.extend
didInsertElement: ->
#updateForm()
updateForm: (->
type = #get('type')
typeObject = App.SelectorTypes.findProperty('type', type)
return if Ember.isNone(type)
view = typeObject.get('typeView')
#get('childViews').forEach (v) -> v.remove()
#get('childViews').clear()
#get('childViews').pushObject(view)
).observes('type')
And the template:
Selector Type:
{{view Ember.Select
viewName=select
contentBinding="App.SelectorTypes"
optionValuePath="content.type"
optionLabelPath="content.name"
prompt="Pick a Selector"
valueBinding="selector.type"
}}
<dl>
<dt><label>Details</label></dt>
<dd>
{{view App.SelectorDetailView typeBinding="selector.type"}}
</dd>
</dl>
Seems too hard, though, would be interested to see better solutions!

Looping through elements with the same class in Backbone View with .each?

I'm using Backbone and JQuery and would like to create a Backbone View to create equal height columns as described in method 2 of this link. The HTML looks like this:
<div class="container">
<div id="leftcolumn" class="set_equal_height"> … Lots Of Content … </div>
<div id="middlecolumn" class="set_equal_height"> … Lots Of Content … </div>
<div id="rightcolumn" class="set_equal_height"> … Lots Of Content … </div>
</div>
I put together the following Backbone View but it's not working presumably because the loop using .each is not working (the page loads with no errors, but the height of the columns is not modified by the javascript):
define([
'jquery',
'underscore',
'backbone',
], function($, _, Backbone) {
var SetEqualHeight = Backbone.View.extend({
initialize: function() {
var tallestcolumn = 0;
console.log(this.$el.height());
console.log(this.$el.attr("id"));
this.$el.each(function() {
currentHeight = $(this).height();
console.log(currentHeight);
if(currentHeight > tallestcolumn) {
tallestcolumn = currentHeight;
}
});
this.$el.height(tallestcolumn);
},
});
return SetEqualHeight;
});
I'm defining the "el" argument in a separate Wire specification as follows: { el: 'div.set_equal_height' }, and it is passing correctly since the "console.log(this.$el.height())" and console.log(this.$el.attr("id")) in the code above print out correctly. However the console.log inside the ".each" statement doesn't print out, showing that there is a problem with the ".each". I looked at this question and tried out the Underscore "_.each" method but could not figure out how to iterate through elements with a given class (i.e. div.set_equal_height) instead of a given array. Could anyone enlighten me about making .each work in the above Backbone View? Please!!!
Just for reference, the following function works by itself (I'm looking to incorporate it as a Backbone view or view helper):
function setEqualHeight(columns) {
var tallestcolumn = 0;
columns.each(function() {
currentHeight = $(this).height();
if(currentHeight > tallestcolumn) {
tallestcolumn = currentHeight;
}
});
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($("div.set_equal_height"));
});

I assume you are instantiating your view with something like this?
new SetEqualHeight({el: '.container')
If so, that means that $el will be set to the container div inside your view. $(anything).each will iterate though all members of "anything" ... but in your case there is only one member ('.container').
The solution is to change this line:
this.$el.each(function() {
to:
this.$el.find('.set_equal_height').each(function() {
or better yet (more Backbone-y):
this.$('.set_equal_height').each(function() {
Hope that helps.