i have drop downlist in emberjs and i declare it like that below
{{view Ember.Select contentBinding="ResAdmin.adminController.serviceAreaList" selectionBinding="ResAdmin.adminController.serviceAreaSelection" optionLabelPath="content.ZipCode" optionValuePath="content.ServiceAreaID"}}
but i want to use kendo ui's dropdownlist which i can use like below
<input id="dropDownList" />
$(document).ready(function() {
$("#dropDownList").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Item1", value: "1" },
{ text: "Item2", value: "2" }
]
});
});
i want to use kendoui dropownlist with ember
Try it like wycats' examples for jqueryUI
App.KendoSelectView = Em.Select.extend({
didInsertElement: function () {
this.$().kendoDropDownList({
dataTextField: ....
});
}
});
You can probably pick up the attributes for the DDL from the select properties.
Related
Is this possible? I know I can do:
this.store.find('model', 1)
but that's not what I want. I would like to retrieve the json in this format: (working if I retrieve it in the route like this ):
App.OptionsRoute = Ember.Route.extend({
model: function () {
return {
"options":{
"id": "1",
"headline": "A Headline",
"results": [
{
"id": "1",
"title": 'Option 1',
},
{
"id": "2",
"title": "Option 2"
}
]
}
};
}
});
options model:
App.Options = DS.Model.extend({
headline: DS.attr(),
results: DS.attr()
});
options.hbs
<h5>{{options.headline}}</h5>
{{#each item in options.results}}
<h5>{{item.title}}</h5>
{{/each}}
I am using the RESTAdapter. And that is the only model that will be retrieved on that route. I would like to be able to use ember-data, but store.find expects an array.
You're missing a point here. First of all you're using bad format for your response. You need custom serializer. You can also use a bit more dirty workaround like this(but it works). Route:
App.OptionsRoute = Ember.Route.extend({
model: function() {
that = this;
return new Promise(function (resolve, reject) {
url = that.store.adapterFor('option').buildURL('option');
Ember.$.getJSON(url).then(function (json) {
body = json.options;
correct = {
options: [
body
]
};
that.store.pushPayload('option', correct);
resolve(that.store.all('option').get('firstObject'));
});
});
}
});
Template:
<h5>{{model.headline}}</h5>
{{#each item in model.results}}
<h5>{{item.title}}</h5>
{{/each}}
Application outputs:
A Headline
Option 1
Option 2
Working demo - please notice that I'm using $.mockjax to recreate your response from server, but it matches format you provided.
I have this:
App.LoginRegisterController = Ember.ObjectController.extend({
init: function () {
this.set('products', this.store.find('product'));
},
subscriptionOptions: function () {
return this.get('products').map(function (product) {
return {id: product.id, title: product.title};
});
}.property('products')
});
Then in my template:
{{view "Ember.Select"
content=subscriptionOptions
optionValuePath='content.id'
optionLabelPath='content.title'}}
However subscriptionOptions only get called once before the products are populated. If I change the template to:
{{view "Ember.Select"
content=products
optionValuePath='content.id'
optionLabelPath='content.title'}}
The data gets populated correctly, but I need to insert an option into the select that isn't related to any of the models, so I need to populated it with references. How can I get the select to update from subscriptionOptions as products change?
Ah, I needed to use #each on the property and get() when accessing the title for it to show up properly.
App.LoginRegisterController = Ember.ObjectController.extend({
init: function () {
this.set('products', this.store.find('product'));
},
subscriptionOptions: function () {
return this.get('products').map(function (product) {
return {id: product.get('id'), title: product.get('title')};
});
}.property('products.#each')
});
I'm trying implement Date range picker to ember view.
App.DaterangepickerView = Ember.View.extend({
tagName: "input",
attributeBindings: ["start", "end"],
start: null,
end: null,
didInsertElement: function() {
var self = this;
this.$().daterangepicker(
{
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: '2013-12-31'
},
function(start, end) {
console.log("Date-range-picker:");
self.set('startdate',start.format('DD-MM-YYYY'));
self.set('end',end.format('DD-MM-YYYY'));
console.log("start: " + self.get('start'));
console.log("end: " + self.get('end'));
}
)
},
});
template:
<script type="text/x-handlebars" data-template-name="daterangepicker">
{{view App.DaterangepickerView startBinding="start" endBinding="end"}}
start date: {{start}}
end date: {{end}}
</script>
controller:
App.DatatableController = Ember.ArrayController.extend({
start: "2013-08-07",
end: "2013-08-09",
});
startBinding and endBinding are probably wrong parameters of ember.view, but I don't know how to correctly write by contentBinding. Picker is shows and set a correct information to console, but I need set controller from there. Did you do something similar?
You need to use start intead of startdate.
Update this code from:
self.set('start',start.format('DD-MM-YYYY'));
To
self.set('startdate',start.format('DD-MM-YYYY'));
so your start binding will work.
It's a good idea to pass the current start and end dates to daterangepicker, so when you show the picker it will have the selected value:
this.$().daterangepicker(
{
startDate: this.get('start'),
endDate: this.get('end')
}
The final result is the following:
App.DaterangepickerView = Ember.View.extend({
tagName: "input",
attributeBindings: ["start", "end"],
start: null,
end: null,
format: 'YYYY-MM-DD',
didInsertElement: function() {
var self = this;
var format = this.get('format');
this.$().daterangepicker(
{
format: format,
startDate: this.get('start'),
endDate: this.get('end')
},
function(start, end) {
self.set('start',start.format(format));
self.set('end',end.format(format));
}
)
},
});
And this is a sample fiddle with this working http://jsfiddle.net/marciojunior/UTV3U/
I hope it helps
Here I am at the beginning of a project. I am using zurb-foundation and marionette. I have an element that is rendering a template that is supposed to be tabs. As it stands:
define([
"backbone",
"marionette"
], function(Backbone, Marionette) {
MyItem = Backbone.Marionette.ItemView.extend({
template: "#design-tabs",
className: "section-container tabs",
onRender: function() {
$(this.el).foundation();
}
});
return MyItem;
});
there are no tabs. I think this is because the <div> being rendered to replace the <script> tag in the template does not have a particular data attribute (data-section). I went looking for something like 'className' that I could add to the ItemView declaration above in order to include data-attributes, but I have come up dry. I want something like:
MyItem = Backbone.Marionette.ItemView.extend({
template: "#design-tabs",
data: {
data-section: "",
data-foo: "bar"
},
className: "section-container tabs",
.
.
.
How do I add data attributes to the <div> (or otherwise) that replaces the <script> in a template?
To add data properties, use Backbone's attributes hash:
var MyView = Backbone.Marionette.ItemView.extend({
template: "#design-tabs",
className: "section-container tabs",
attributes: {
"data-section": "",
"data-foo": "bar"
}
});
Documentation: http://backbonejs.org/#View-attributes
If you prefer or need dynamic values, you can do in this way:
attributes: function() {
return {
'src': this.model.get('avatar_src')
};
}
I am a starter of Ember and I try to use Ember.js(1.0.0.pre) in my app.
I am trying to set title for my Ember.Select's options to show tips when mouseover.
But, I can't find any information about the option's title in API.
Do I have to write a function myself to populate the "title" attribute?
Is there any way like "optionLabelPath" to bind "title" attribute for options?
To achieve this we need to reopen the Ember.SelectOption
here is the fiddle for the following example
MyApp = Ember.Application.create();
Ember.SelectOption.reopen({
attributeBindings: ['title'],
title: function() {
var titlePath = this.getPath('parentView.optionTitlePath');
return this.getPath(titlePath);
}.property('parentView.optionTitlePath')
});
MyApp.selectArray = [{
label: "A",
id: "1",
title: "for Apple"
},
{
label: "B",
id: "2",
title: "for Ball"
}];
Handlebars
<script type="text/x-handlebars" >
{{view Ember.Select
contentBinding="MyApp.selectArray"
optionLabelPath="content.label"
optionValuePath="content.id"
optionClassPath="content.title"
}}
</script>
Here is the simplest I could come up with:
http://jsfiddle.net/aK8JH/1/
Template:
{{view MyApp.Select contentBinding="content"}}
View:
MyApp.Select = Ember.Select.extend({
attributeBindings: ['title'],
title: 'myTitle'
});
Read this: http://emberjs.com/documentation/#toc_attribute-bindings-on-a-view
Below is what I've got after observing source code in Ember:
Ember.SelectOption.reopen({
attributeBindings: ['title'],
init: function() {
this.titlePathDidChange();
this._super();
},
titlePathDidChange: function() {
var titlePath = this.get('parentView.optionTitlePath');
if (!titlePath) { return; }
Ember.defineProperty(this, 'title', Ember.computed(function() {
return this.get(titlePath);
}).property(titlePath));
}.observes('parentView.optionTitlePath')
});