There are bunch of answer on how to jQuery upload. That's not what I want. I want to simply bind the "file" input so that it's send with my object when I submit the form.
App.Document = DS.Model.extend({
document_name: DS.attr(),
document_file: DS.attr()
});
<form role="form" {{action save on="submit"}}>
<div class="thumbnail" {{action 'start'}}>
<img {{bindAttr src=src}} class="preview"/>
<img class="shadow hide"/>
<canvas class="hide"></canvas>
</div>
{{input type="file" valueBinding="document_file" name="document_file" }}
{{input type="text" valueBinding="document_name" name="document_name"}}
<div>
<button class="btn btn-primary" {{action 'save'}}>Save</button>
</div>
</form>
I haven't found a single tutorial on simple upload. It can't be too hard to send a file right?
It is actually pretty simple to do it althougt it is not functionality out of the box. See my question here with working example: Ember.js value binding with HTML5 file upload
Ember Data doesn't support it out of the box, you'll need to override the adapter and implement your own version of the createRecord/updateRecord which modifies the ajax call. It's probably easier to just use jquery.
Related
I'm having trouble trying to get ember and sails playing nice together when it comes to relationships with belongsTo/hasMany.
I have a simple form:
<form {{action 'addMessage' on='submit'}}>
<div class="form-group">
<label for='name'>Title</label>
{{input value=title class="form-control" required="required"}}
</div>
<div class="form-group">
<label for='location'>User</label>
{{input value=user class="form-control" required="required" value=1}}</div>
<p>
<button class="btn btn-primary btn-block" type="submit">Create Message</button>
</p>
And a controller with the action
actions: {
addMessage: function() {
var newMessage = this.store.createRecord('message', {
title: this.get('title'),
user: this.get('user')
});
newMessage.save().then(function() {
}, function(error) {
console.warn('Save Failed.', error);
});
},
I'm just passing a string, and a value which matches a user id. When I look at what's being passed the title is fine, but the user id is null.
I'm using sails ember blueprints so it should work, but think I might be doing something wrong.
I've uploaded the sample code here if someone can take a look https://github.com/jimmyjamieson/ember-sails-example
On your user input is says value=1 which I think is changing what the controller is writing that property as.
so instead of
{{input value=user class="form-control" required="required" value=1}}
try
{{input value=user class="form-control" required="required"}}
Ok, fixed. I've added a repo for others to look at. It works with ember and ember-data 2.0 https://github.com/jimmyjamieson/ember-sails-relationships-hasmany-belongsto-example
What I want to do should be fairly simple.
I want to pass variables to partials for reusability.
I want to do something like this :
<form {{action login content on="submit"}}>
<fieldset>
{{partial 'components/field-email' label="Email" fieldname="email" size="full"}}
[...]
</fieldset>
</form>
Instead of doing this :
<form {{action login content on="submit"}}>
<fieldset>
<div {{bind-attr class=":field :email size"}}>
<label {{bind-attr for=fieldname}}>{{label}}</label>
{{input type="email" id=fieldname name=fieldname valueBinding="email" placeholder=label}}
</div>
[...]
</fieldset>
</form>
coming from Rails, I expected this to just work, but it seems I can't (don't know how to) pass variables to a partial. I looked at all the ways to "include a template part":
partial
view
render
The thing that worked for me is using a View. But I thinks it's overkill. I just want separate sub-templates for reusability and readability, no context change or specifying a controller needed here.
Edit:
I also tried to use this partial as a component :
{{field-email type="email" id="email" name="email" valueBinding="email" placeholder=label size="full"}}
Which works for everything except the valueBinding.
I guess it's also worth mentioning that I have a route setup with an action that calls login on my AuthController :
App.LoginRoute = Ember.Route.extend
model: -> Ember.Object.create()
setupController: (controller, model) ->
controller.set 'content', model
controller.set "errorMsg", ""
actions:
login: ->
log.info "Logging in..."
#controllerFor("auth").login #
This whole thing works if all the markup is in the login template but fails if I try to break it up with partials, components and such.
There has to be something that I didn't see...
You should use a component in this case.
If you setup your template correctly (components/field-email), you can use on this way:
{{field-email label="Email" fieldname="email" size="full"}}
You could setup the html component properties, if you define the component. Based on your example, it could be:
App.FieldEmailComponent = Ember.Component.extend({
classNames: ['size'],
classNameBindings: ['email', 'field'],
field: null,
email: null
});
Example: http://emberjs.jsbin.com/hisug/1/edit
Got it working, I had to use a component. I had messed up the "value" part.
components/field-email.hbs :
<div {{bind-attr class=":field :email size"}}>
<label {{bind-attr for=fieldname}}>{{label}}</label>
{{input type="email" name=fieldname value=value placeholder=label}}
</div>
login.hbs :
<form {{action login content on="submit"}}>
<fieldset>
{{field-email label="Email" fieldname="email" value=email size="full"}}
[...]
</fieldset>
</form>
What I get from this is that in order for attributes to be used in a component they have to be explicitly set when using the component. Once they are set, they are bound.
In my case, when the input value changes, the associated route property is updated as well which is pretty cool.
I need to make a bootstrap form with 10 textfield elements.
From the bootstrap doc, I need to have this code for each textfield element:
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
Em.TextField object only manage the
<input type="text...
and I would like to minimize my handlebar form.
What is the best solution to have the expected result with the minimum of code ?
Is there a sample code for this ?
You can create a new view that includes all of the required bootstrap markup and incorporates the built in Ember.TextField input element. The custom TextField has an added label property that sets the text for the form label.
JSBin Example
Custom TextField:
JS:
App.BootstrapTextFieldView = Ember.View.extend({
templateName: 'bootstrapTextField',
inputElement: null
});
Handlebars:
<script type="text/x-handlebars" data-template-name='bootstrapTextField'>
<div class='control-group'>
<label class="control-label" {{bindAttr for='view.inputElement.elementId'}}>{{view.label}}</label>
<div class="controls">
{{view Ember.TextField valueBinding='view.value' viewName="inputElement"}}
</div>
</div>
</script>
Using the new view
You would use it similar to using the normal Ember.TextField:
<form class="form-horizontal">
{{view App.BootstrapTextFieldView valueBinding='textFieldValue' labelBinding='textFieldLabel'}}
</form>
The only tricky part was correctly setting the for='..." property on the <label> since we need to get the auto-generated id of the {{view Ember.TextField ...}}. This can be done by using the viewName property of the {{view ...}} helper. Setting {{view App.theViewHere viewName='desiredViewName' lets us access the instance of Ember.TextField we created and set the for property of the label to the view's id using the {{bindAttr...}} helper.
I am having a bit of trouble with ember.js.
I have the following code which properly calls the event in the router to create the notebook. However, it will not pass the notebook context, it it undefined. I have been searching for hours to try and find a solution for this.
I found this and this, which are helpful but I'm not completely sure I'm on the right track. Am I missing something?
Route
App.NotebooksNewRoute = Ember.Route.extend
model: ->
App.Notebook.createRecord()
events:
create: (notebook) ->
#persist notebook
Form
{{#with content}}
<form {{action create content on="submit" }} >
<div>
{{view Ember.TextField placeholder="Enter a title" valueBinding="title" }}
</div>
<div>
{{view Ember.TextArea placeholder="Notes" valueBinding="description" }}
</div>
<button type="submit">Create</button>
</form>
{{/with}}
Am I missing something?
Change {{action create content on="submit" }} to {{action create this on="submit" }}
Why?
When you use the handlebars helper {{#with}}, the enclosed block will be rendered in the context of the specified variable. So after {{#with content}}, this is whatever content was and you can access properties like title and description directly instead of content.title and content.description
I am trying to add an ember view using handlebars.js in jade. When I use this code
script(type='text/x-handlebars')
{{view App.LoginView}}
{{view Ember.TextField valueBinding="username" placeholder="Enter your username"}}
it renders it as:
<div id="ember194" class="ember-view"></div>
<input id="ember204" class="ember-view ember-text-field" placeholder="Enter your username" type="text">
I can't seem to get the textfield to be wrapped within the view. I am wondering if there is a trick to be able to use handlebars correctly within a jade template.
The desired result that I want is:
<div id="ember194" class="ember-view">
<input id="ember204" class="ember-view ember-text-field" placeholder="Enter your username" type="text">
</div>
Try:
script(type='text/x-handlebars')
{{#view App.LoginView}}
{{view Ember.TextField valueBinding="username" placeholder="Enter your username"}}
{{/view}}
Jade saves you from HTML closing tags but the handlebars block must be intact, and what you're asking for requires the Ember.TextField to be inside a {{#view}} block.
[Edit] FYI check out http://emblemjs.com/