EzDevInfo.com

How do i replace 'view Ember.TextField' with 'input' in an emblem template?

I recently updated to Ember 1.8.0 and using view Ember.TextField valueBinding="name" throws a deprecation error. Per the deprecation guide it should be replaced with the input helper, but the following doesn't work

input valueBinding="name"

Sending an action to a view in Ember.js

I have a view which contains a close button:

.flash-message
  div class="close-button" click="view.removeFlash"
  = view view.content.thisView

The view itself reads:

Whistlr.AlertView = Ember.View.extend
  templateName: "_alert"

  removeFlash: ->
    alert "Close!"

However, when I click on the "close-button" div, nothing happens. I've tried rewriting the button a few different ways:

click="view.removeFlash"
click="removeFlash"
click="removeFlash" target="view"

I've also tried placing the action directly in the controller (though I'm not even sure there is a controller for the view):

Whistlr.AlertController = Ember.ObjectController.extend
  removeFlash: ->
    alert "I work!"

None of these approaches work. Perhaps it's not even possible to send an action to the view like I would with a controller? If not, how else can I approach this problem?

Inserting a translation into a placeholder with Emblem.js

I'm trying to write a login form with ember.js/emblem.js. Everything works, unless I try I18ning the placeholders like so:

Em.TextField valueBinding="view.username" placeholder="#{t 'users.attributes.username}"
Em.TextField valueBinding="view.password" placeholder="#{t 'users.attributes.password'}" type="password"

I get the same response if I try:

= input value=view.username placeholder="#{t 'users.attributes.username}"
= input value=view.password placeholder="#{t 'users.attributes.password'}" type="password"

In both cases, I get this error message:

Pre compilation failed for: form
. . . .
Compiler said: Error: Emblem syntax error, line 2: Expected BeginStatement or DEDENT but "\uEFEF" found.   Em.TextField valueBinding="view.username" placeholder="#{t 'users.attributes.username}"

I assume this is happening because I'm trying to compile something from within a statement that's already being compiled. In evidence of this, I don't get the runtime error if I change the code to:

input value=view.username placeholder="#{t 'users.attributes.username}"
input value=view.password placeholder="#{t 'users.attributes.password'}" type="password"

But the downside is that the value bindings no longer work, which still leaves the form nonoperational. Is there another way of approaching this problem that I haven't considered?

Index in Each Helper in Emblem

I see that you can get the index within an each helper in handlebars with

{{#each array}}
    {{@index}}: {{this}}
{{/each}}

which I found in How to get index in Handlebars each helper?

This doesn't seem to work in Emblem though:

ul
  each App.things
    li {{@index}}

Uncaught Error: Emblem syntax error, line 1: Expected BeginStatement or DEDENT but "=" found. =@index

Am I doing something wrong?

Displaying an object stored in a view property (Ember.js)

I have a view with several properties, including one that I want to contain an object. The view looks like this:

Whistlr.LightboxView = Em.View.extend
  templateName: 'lightbox'
  classNames: ['ember-lightbox']
  content: ""

content is the property I want to contain an object. I set the object like so:

lightbox = Ember.View.views[$(".ember-lightbox").attr('id')]
lightbox.set 'content', Whistlr.AuthRegisterView.create()

As far as I can tell, the object is setting correctly. However, when I try to display it like this:

#lightbox
  view.content

The browser displays this, instead:

<Whistlr.AuthRegisterView:ember364>

How can I get it to actually render the object, rather than a string representing the object?

Call a function in emblem conditional statement

How can we call a function with parameters in emblem's conditional statement. Like I have a function:

priorExist: (prior) ->
      @get("priors").findBy("condition", prior)

But I get an error when I call it in emblem like this

if priorExist(name)

Is there any way to call above function in emblem?

How to bind input value in emblem.js

I have a filter attribute in my controller which I want to bind to the corresponding DOM element.

So far, I am able to display filter value, doing:

%input type="text" value=filter

But what I want is to reflect input changes back to filter, with a bidirectional binding...

Any clue?

ember: How can I set bind-attr for a link-to?

I want to set the style of a link-to helper but don't quite understand how.

I have the following model:

App.ArtistFavorite = DS.Model.extend
  name: DS.attr 'string'
  image_url: DS.attr 'string'

My template:

li
  link-to 'artistFavorite' this {bind-attr style="background-image: url('image-url');"}

But the bind-attr doesn't seem to work

BTW: I'm using emblemjs and coffeescript

Compiling Emblem.js Without Ember

I'm trying emblem.js right now. It's a really good wrapper of Handlebars to write templates. However, the docs are a bit ember.js and handlebars.js dependent. I want to use Emblem.js without Ember, but there is no real explanation on how to compile the template.

So can we use emblem.js without ember (or better, without Handlebars dependency)? The way I'm doing it right now, I have this function to render the template:

function render(target, tmpl, data) {
    var source   = tmpl.html();
    var template = Emblem.compile(Handlebars, source);
    var result = template(data);

    target.html(result);
}

Is that the correct way to compile Emblem? It works, but I have a gut feeling that there's a better way to do that. In Handlebars, the compile line is quite similar:

var template = Handlebars.compile(source);

Thanks for the answers.

Why is that using itemController renders a collection of empty items?

I'm currently learning Ember while following the todomvc tutorial with ember-cli: http://thetechcofounder.com/getting-started-with-ember-js-using-ember-cli/

I'm in the section where in order to edit a todo, it's needed to add the editTodo action in the TodoController. So far so good, but it also says to use itemController on the each handlebars helper to tell each todo to use a specific controller

.

The thing is that when I add itemController to each in the template (using Emblem.js: each itemController='todo'), the template no longer renders the title of each item on the collection, it only renders them blank:

I cannot understand why this happens.

Template extract

section#main
  ul#todo-list
    each
      li class={isCompleted:completed}
        if isEditing
          input.edit
        else
          = input class='toggle' type='checkbox' checked=isCompleted
          label{action 'editTodo' on='doubleClick'}= title
          button.destroy
  input#toggle-all type='checkbox'

Controller extract

`import Ember from 'ember'`

TodoController = Ember.Controller.extend
  actions:
    editTodo: ->
      @set 'isEditing', true

`export default TodoController`

Ember Cli not compiling with broccoli-emblem-compiler

I am trying to set up this repository locally https://github.com/lrdiv/ember-soundcloud and i have come across to this issue with broccoli-emblem-compiler. See the image in attached

From my understanding the broccoli-emblem-compiler is not able to compile my emblem templates and i don't know how i can figure it out.

These are all the steps i have done to install and set up the project with Ember-Cli

ember new soundcloud

ember install:addon ember-cli-coffeescript

ember install:npm broccoli-emblem-compiler

I have deleted the app folder and replace with the project https://github.com/lrdiv/ember-soundcloud that i have cloned

then i have installed the other node modules required

ember install:npm broccoli-static-compiler

ember install:npm broccoli-merge-trees  

ember install:npm install body-parser

and at the end i run

ember server , and in my terminal i get that error i have attached.

What can i do now to sort this out? What's really the problem?

didInsertElement for only single element EmberJs

I want to call didInsertElement on just one element but not on others, I have a component template with multiple elements, but I just want to use it on specific element.

Any Idea how to do this? Is it possible, if yes, good practice or not..and component having multiple elements pointing towards other components, is that okay?

How to interpolate a value from an object inside interation in Emblem.js?

I have the following code in an Emblem.js template:

each segment in controller
  .panel.panel-default
    .panel-heading
      h4.panel-title
        a data-parent="#accordion" data-toggle="collapse" rel='nofollow' href="#collapse{{segment.id}}"
          span {{segment.title}}
    div id="collapse{{segment.id}}" class="panel-collapse collapse in"

What I'm actually trying to achieve is to interpolate object data into the HTML attributes. I been trying to {{segment.id}} but that render some script tags along with the value which is not what I'm looking for. Is there another way to do this?.

Multiline statements in Emblem.js

I'm developing Ember.js application using Emblem.js as template precompiler.

I have an ember component with a lot of bindings

= delivery-map deliveryZones=deliveryZones selectedZone=selectedZone drawingZone=drawingZone isPolygonEditing=isPolygonEditing

Not very good looking... So I want to make it look more like this:

= delivery-map
  deliveryZones=deliveryZones
  selectedZone=selectedZone
  drawingZone=drawingZone
  isPolygonEditing=isPolygonEditing

Is there a way to do something like this in Emblem.js?

Create a nested route with a dynamic segment in Ember.js

I have a nested edit route for one of my resources:

@resource 'organization', path: 'organizations/:organization_id', ->
  @resource 'organization.edit', path: '/edit'

I link to it like this (using Emblem.js):

linkTo 'organization.edit' organization | Edit

Unfortunately, this results in a url like:

/organizations/4#

Rather than the expected:

/organizations/4/edit

Any idea why this is happening? I experimented with the route syntax a lot. Removing path for organization.edit does nothing, as does a full path: 'organization/:organization_id/edit.