We Keep Coding

Apply model changes immediately

I've form with some input fields, upon submit I make a $http call and populate a model object that binds data to a table on my view. Once user saw the result, they may change the data in the form and submit the same once again, I'm trying to clear the result and populate the data with the new result. Some time the result can be same, in such cases user is not able to understand whether the form was submitted and new results has been updated or not. I'm setting my model object to undefined expecting that the data on the table will get wiped. I also have an ng-if for null check of the object and control the display of the table, I expect it to hide the table, but unfortunately it is not happening. How can I do that? $scope.apply() is the only way for me to do that. I hate to use it as it causes full digest cycle. Please advise.

You can create a separate scope for clearing the data and call that using model on button click.
Example
$scope.clearData = function () {
$scope.ApplicationFormName = "";
$scope.FirstName="";
//put your logic for clearing the form here
};
in HTML
<button title="Clear" ng-click="clearData()"></button>

Sitecore SPEAK UI programmatically set selected item of ComboBox

How should I set the selected item of a ComboBox component in Sitecore SPEAK UI?
My ComboBox is populated by a QueryDataSource component which is looking at a folder of items in my core DB.
I can retrieve the currently selected value (which is text, not an ID) using the following code:
var value = this.MyComboBoxId.viewModel.selectedItemId();
and I would have expected to be able to set the selected value using:
var value = "SomeValueWhichExistsInTheList";
this.MyComboBoxId.viewModel.selectedItemId(value);
but this doesn't seem to work. The documentation here mentions using
rebind(items, selectedItem, selectedValue, displayFieldName, valueFieldName)
but I don't want to have to re-populate it, just change the selected item. My code is within the initialize method of my model.
Edit
I found that if the ComboBox does not have DisplayFieldName or ValueFieldName values set in the rendering properties you have to set the value to the appropriate itemId. DisplayFieldName and/or ValueFieldName should be set to the name of a field you have created - you cannot bind to the item name.

In the initialize method, use the following code to set the value:
app.yourQueryDataSource.on("change:hasItems", function () {
app.yourComboBox.set("selectedValue", yourValue);
});

Above approach did not work for me and hence i used the
app.<yourcontrolid>.viewModel.rebind()
function as documented in Sitecore SPEAK combobox documentation and that worked.

Model in from ng-option not displaying results | Possible dynamic model?

I currently list a set of options for ng-options from a resource that contains JSON.
[
{
id:23,
name:"Other"
},
{
id:24,
name:"Crew"
},
{
id:25,
name:"Announcer"
},
{
id:26,
name:"Producer"
},
{
id:27,
name:"Cameraman"
},
{
id:28,
name:"Monitor"
}
]
This is all added into my scope at $scope.broadcaster = response.data. I then loop through everything in my options by a simple ng-options.
<select ng-model="selectedrole" ng-options="roles as roles.name for roles in broadcaster" ng-init="selectedrole=broadcaster[0]">
</select>
Everything goes good once the page loads up. I can select from my list of names and the ng-init starts on the first selection as anticipated. However I have a few issues that I can't seem to resolve.
1) In my doc I set up {{selectedrole}} and I expected to see the contents of my model on the page reflected by my current selection. Instead I see no output at all. I can't tell if the model is even being updated properly so I'm not sure if I can use it in my formdata.
2) This select is generated on click so users can select a role for more than one person. However since the model is the same, any selection is copied over which ever one is changed. I need to find a way to output the model to check the data, but make that model dynamic so i can get a list of results from all the different selections.
EDIT:
Now this is really crazy. I mocked it up in a plunker and its at least showing the model just fine. Are there some conflictions I should worry about that would stop the model from updating? I literally copy pasted my data and its working in plunker but not my project.
http://plnkr.co/edit/GbdOmdjj1M3OuZKO5cSq?p=preview
EDIT2:
Even more info. As I stated before, the select is created when a user clicks on a function that creates an ng-repeat with user information and a new select option for role. If I place the {{selectedrole}} within that ng-repeat I actually get all the data returned when I user selects it. It seems that since the click creates a push of new data, it will not work outside each item. The issues now is that every instance has its own model so i need to figure out how to gather all this data from each ng-repeat and post it to the form. I'll try to update as I work through the issue.

How to update records in an ember model

I'm fetching a list of records from App.Resource.find() This is working fine.
For each row of data there is a drop down box with fixed values. When a change is made to a drop down box I'd like to issue a POST or PUT request back to the server to update that row with the newly selected value from the drop down.
I am having trouble with two things:
How can I get the ID and selected value of the dropdown in my model or controller
How can I take those values and issue a request to the server. Is there App.Resource.update...?
I have a jsBin of the working example with local data: http://jsbin.com/OcAyoYo/84/edit

Ok, here's one approach to get the selected value, let's put things where they should go, ok, first of all, let's create a controller which is going to decorate your Response records, you mixed names, you're using Post, so, I'll use that name, here is the controller:
App.PostController = Ember.ObjectController.extend({
selectedChanged: function() {
//here, you have access to the selected value with this:
// this.get('selected')
//And also, this controller represents you object rendered on the screen,
//so, you can change it here if you want like this:
//this.set('whataverPropertyYouWantToChange', 'newValue');
//then you can save this record(send the request to the server) by just doing this:
//this.save(); this will make a request to the server
}.observes('selected')
});
then, in order to use that controller, change the loop where you render the records, to this:
{{#each model itemController="post"}}
<tr>
<td>{{author}}</td>
<td>{{book}}</td>
<td>
{{view Ember.Select
contentBinding= 'App.names.content'
selectionBinding='selected'}}
</td>
</tr>
{{/each}}
just be careful, in PostController, the observer will be fired even if the 'selected' property has null values, you need to verify if it is not null.

Dojo: Getting access to the clicked item in a dijit.form.Select?

I have a dijit Select widget and need to do something when the user clicks one of the dropdown items. Meaning I need access to the clicked item, to retrive some information, and call one of my own functions.
I've tested to attach an onChange on the select and I can get the text value selected fine. But I need the object and not the value. The object holds more values in a data-info-attribute.
Basically what I'm trying to achieve is to show one value in the list but send along more values to populate other fields when selected.
Background: This is a typeahead field populated thru AJAX by a server function. There IS a store attached but it's empty (as far as I can tell) so I've been unsuccessful trying with: .store.fetchItemByIdentity - always returns nothing.
ta.store.fetchItemByIdentity({
identity: ta.getValue(),
onItem: function(item, request){
console.log(item),
console.log(request)
}
})
I expect the log to show item- and request-object, but they're both undefined.
ta.getValue() get's the selected value as expected.
What's the best way to achieve this?

Have a look at my answer to onChange not sufficient to trigger query from Dojo Combobox and also to jsFiddle mentioned there. I added code specific for your needs there:
select.dropDown.on("itemClick", function(dijit, event) {
var node = dijit.domNode;
console.log(domAttr.get(node, "data-info-attribute"));
// or
console.log(node.dataset.infoAttribute);
});