I am using the Twitter typeahead.js plugin. So to use it I am extend Ember's TextField. The plugin all works fine. Now I just want to make the value accessible inside the controller.
When I use the value binding inside the view class, it works fine. Here is the bin example. Here the value gets set initially and updates later. To test the text view type 'aaa'.
App.TypeAhead = Ember.TextField.extend({
classNames: ['cmp-typeahead'],
attributeBindings: ['id','value'],
valueBinding: 'targetObject.airportCode',
....
});
But when I try to set the value binding via the template, it doesn't seem to work. Here is the bin example. To test the text view type 'aaa'.
{{view App.TypeAhead data=airports valueBinding="view.targetObject.airportCode"
id="fromAirportCode"}}
What am I doing wrong?
Since the view helper will keep the current controller, it's as simple as:
{{view App.TypeAhead data=airports valueBinding="airportCode"
id="fromAirportCode"}}
Example: http://emberjs.jsbin.com/ciwiv/1/edit
Related
Plunkr
I made a autofill dropdown using angular custom directive.All is working fine.
But I want to make this directive reusable!!!!
Currently my directive is tightly depended on Id and Name property of selected item.
I want to assign text property(Which I want to bind the text into list items html) and value property(which will be available in my app controller) like textfield="Name" and value-field="Id".
Imagine If my data object does not contain Name or Id property , my
directive would not work.
HTML:
<autofill-dropdown items="searchCurrencies"
textfield="Name" valuefield="Id" selected-data="Id" urllink="/api/SetupCurrency/Autofill?filter=">
</autofill-dropdown>
Template :
<div class="pos_Rel">
<input placeholder="Search Currency e.g. doller,pound,rupee"
type="text" ng-change="SearchTextChange()" ng-model="searchtext"
class="form-control width_full" />
<ul class="currencySearchList" ng-show="IsFocused && items.length">
<li class="autofill" ng-repeat="item in items" ng-click="autoFill(item)">
{{item.Name}}
</li>
</ul>
</div>
So,finally what I want to accomplish , I'm going to bind Name property(or other,depends on what value I set to "text-field" attribute onto my html) to listitems and whenever user select an item, it will give me the selected Id(or other property ,depends on what value I set to "value-field" attribute onto my html).
Plunkr Here
Update:
I think my question not so clear.
I have written same directive 2 times to accomplish and also 2 times same template :(
Please look through my updated plunkr.
Updated Plunkr
I want to say that I am not quit sure if I understood your question in the right way so I try to repeat it.
textfield="Name" valuefield="Id" selected-data="Id"
You want to store the Value of the Property of the selected Item of your custom directive.
The Value should be stored in the Variable provided in the attribute "textfield"
The attribute "valuefield" should define the name of the property of the selected Object
If this is the case you have to get rid of the two-way databinding for your valuefield. Because you only want to provide a String (like "Id" or "Name").
I altered your plunkr again. First of all I made the new scope variables:
scope: {
'items': '=',
'urllink':'#',
'valuefield':'#',
'textfield':'=',
'Id':'=selectedData'
}
Valuefield is now only a text binding. So if you want to change it in the angular way you have to provide a scope variable outside of the directive and a '=' twoway binding inside :D
$scope.autoFill = function (item) {
$scope.IsFocused = false;
$scope.searchtext = item.Name;
$scope.Id = item.Id;
$scope.textfield = item[$scope.valuefield];
}
Also I added the last expression to your autofill function. The name of the property (valuefield) will be written into the textfield variable which is linked with your outside scope (in this case "Name"):
textfield="Name"
If this is not what you asked I am sorry but I am new to stackoverflow and I still can not comment :P
https://plnkr.co/edit/zE1Co4nmIF3ef6d6RSaW?p=preview
I'm new to Ember.js and I'm trying to figure out how Select views bind their selection to the controller. I have this template:
{{view Ember.Select
contentBinding="content"
selectionBinding="selectedCompany"
optionLabelPath="content.name"}}
{{view Ember.Select
contentBinding="selectedCompany.employees"
selectionBinding="selectedEmployee"
optionLabelPath="content.name"}}
Employee: {{selectedEmployee.name}}
Age: {{selectedEmployee.age}}
I find that the second select does update when selectedCompany changes, but I can't reference the values of name or age in selectedEmployee until I change the second select's value to a different value physically.
How do I make it so that the selectedEmployee is set when the first select changes, such that I can use it's value?
For better clarity, I have my working code here.
Changing content of second selectbox does not actualy change its selection. You have to do it manually, for example by adding following method to controller
onChangeCompany : function() {
if (!this.get('selectedCompany.employees').contains(this.get('selectedEmployee'))) {
this.set('selectedEmployee', this.get('selectedCompany.employees').objectAt(0));
}
}.observes('selectedCompany')
It stil needs some non-null and array-range checking, but does the job - if you select an employee and then change company, employee will change as well.
I've tried to observe selection change for simple Ember.Select and it works, but when I use select with multiple=true it fails. Here some code:
{{view Ember.Select
multiple=true
contentBinding="App.TopicController"
selectionBinding="content.TOPICS"
optionLabelPath="content.label"
optionValuePath="content.id"}}
When I change selection on my input it must trigger observer:
App.Configuration = Em.Object.extend({
TOPICS:[],
// this observer must work when selection changes
topicsSelected: function() {
console.log('topics selection changed!');
}.observes('TOPICS', 'TOPICS.#each', 'TOPICS.length')
});
JSBin with this problem: http://jsbin.com/
Versions: handlebars 1.0.0, ember 1.0.0
Changing the TOPICS variable to topics will solve this problem. I think this happen because this problem https://github.com/emberjs/ember.js/issues/3098.
In your topicsSelected observer if you want to observe the selection just observes('topics.length') is needed.
Give a look in your updated jsbin http://jsbin.com/ofONeQ/14/edit
in Ember multiselects can be created using the multiple property of the Ember.Select view (e.g. in this post).
What I want to do is substituting a multiselect with multiple "normal" selects, which are all bound to the same array. Let's say I have two single selects, then both should be bound to an array fooArray. When I select foo in the first select and bar in the second one, then fooArray should be ['foo', 'bar'].
Any ideas on how to do that?
Kind regards,
Marius
You can set a selectionBinding for each select and a computed property taha makes the array... sure there are better ways to do this... it depends of the number of selects you deal with, because, in this example, the returned array is recalculated each time you get it
and this don't scale very well
App.SelectionController = Ember.ObjectController.extend({
select1Value:null,
select2Value:null,
select3Value:null,
selectedArray:function{
return Ember.Array(this.get('select1Value'),this.get('select2Value'),this.get('select2Value'));
}.property('select1Value','select2Value','select3Value')
});
In the view
{{view Ember.Select
contentBinding="YourSelectContent"
selectionBinding="App.SelectionController.select1Value"
[...]
{{view Ember.Select
contentBinding="YourSelectContent"
selectionBinding="App.SelectionController.select2Value"
[...]
{{view Ember.Select
contentBinding="YourSelectContent"
selectionBinding="App.SelectionController.select3Value"
[...]
I would like to implement knockout functionality to an already existing page. Therefore I want to manipulate with the ViewModel data from existing script. I have mocked up an example but it doesn't work correctly.
A ViewModel is correctly bound to the UI (try typing in the input). It functions also when I modify the ViewModel data in backend (by pressing a button). However when I modify the input value again by typing into the input box, the data is not changed.
How can I propperly modify ViewModel data from backend (some existing code manipulates the data). Please note, that I have used jQuery click event as an example. Existing code may manipulate the data in the different manner.
Here is the code (HTML):
<!-- View -->
<p>First name: <strong data-bind="text: myName"></strong></p>
<input data-bind="value: myName"></input>
<button>Click me</button>
And JS:
// ViewModel
var AppViewModel = function() {
this.myName= ko.observable("John Doe");
}
// ViewModel instance
var app = new AppViewModel();
// Activates knockout.js
ko.applyBindings(app);
// Custom external code that changes the data in the ViewModel instance
$("button").click(function() {
app.myName= ko.observable("Steve Peterson");
ko.applyBindings(app);
});
Instead of creating new observable in click handler
app.myName= ko.observable("Steve Peterson");
modify value of existing observable
app.myName("Steve Peterson");
Working example
http://jsfiddle.net/S9HBq/