We Keep Coding

Angular Chosen default not working with object

I am using https://github.com/localytics/angular-chosen to allow for select tags with search capability for many options.
The problem I'm having is with preselecting an option on an already saved vendor object. When creating a new one there is now issue, but if we're viewing an existing vendor, I want to show the vendor's name in the select box, rather than the placeholder.
<select chosen
ng-model="myVendor"
ng-options="vendor['public-id'] as vendor.name for vendor in vendors"
data-placeholder="Nah">
</select>
And in my controller, I'm setting the model by hand $scope.myVendor = "Some value"
The problem is that I'm populating the options with an object, instead of a key/value. I found an example of it working with a key/value, but haven't had success adapting this to objects as options.
I've even tried setting myVendor to the matching object that I want selected, with no luck.
Plunker of issue

I updated the plunker and change my previous changes on the plugin. this was not the issue. I don't understand how it was giving me errors there.
The solution is to track with an object and two functions the id and the name:
// Controller
$scope.vendors = [
{
"public-id": "1234",
"name": "stugg"
},
{
"public-id": "4321",
"name": "pugg"
}
];
$scope.myVendor = {name: "pugg", id:""};
$scope.updateMyVendorName = function () {
var found = false,
i = 0;
while (!found && i < $scope.vendors.length) {
found = $scope.vendors[i]['public-id'] === $scope.myVendor.id;
if (found) {
$scope.myVendor.name = $scope.vendors[i].name;
}
i++;
}
}
findVendorByName();
function findVendorByName () {
var found = false,
i = 0;
while (!found && i < $scope.vendors.length) {
found = $scope.vendors[i]['name'] === $scope.myVendor.name;
if (found) {
$scope.myVendor.id = $scope.vendors[i]['public-id'];
}
i++;
}
}
// template
<select chosen class="form-control span6" ng-options="vendor['public-id'] as vendor.name for vendor in vendors" ng-model="myVendor.id" ng-change="updateMyVendorName()">
{{myVendor.name}}

Knockout.js - Data binding outputting function text when not using parens

I am new to Knockout and have been trying to follow code examples and the documentation, but keep running into an issue. My data bindings printing the Knockout observable function, not the actual values held by my observable fields. I can get the value if I evaluate the field using (), but if you do this you do not get any live data-binding / updates.
Below are some code snippets from my project that are directly related to the issue I am describing:
HTML
<div class="col-xs-6">
<div data-bind="foreach: leftColSocialAPIs">
<div class="social-metric">
<img data-bind="attr: { src: iconPath }" />
<strong data-bind="text: name"></strong>:
<span data-bind="text: totalCount"></span>
</div>
</div>
</div>
Note: leftColSocialAPIs contains an array of SocialAPIs. I can show that code too if needed.
Initializing the totalcount attribute
var SocialAPI = (function (_super) {
__extends(SocialAPI, _super);
function SocialAPI(json) {
_super.call(this, json);
this.totalCount = ko.observable(0);
this.templateName = "social-template";
}
SocialAPI.prototype.querySuccess = function () {
this.isLoaded(true);
appManager.increaseBadgeCount(this.totalCount());
ga('send', 'event', 'API Load', 'API Load - ' + this.name, appManager.getRedactedURL());
};
SocialAPI.prototype.toJSON = function () {
var self = this;
return {
name: self.name,
isActive: self.isActive(),
type: "social"
};
};
return SocialAPI;
})(API);
Updating totalcount attribute for LinkedIn
var LinkedIn = (function (_super) {
__extends(LinkedIn, _super);
function LinkedIn(json) {
json.name = "LinkedIn";
json.iconPath = "/images/icons/linkedin-16x16.png";
_super.call(this, json);
}
LinkedIn.prototype.queryData = function () {
this.isLoaded(false);
this.totalCount(0);
$.get("http://www.linkedin.com/countserv/count/share", { "url": appManager.getURL(), "format": "json" }, this.queryCallback.bind(this), "json").fail(this.queryFail.bind(this));
};
LinkedIn.prototype.queryCallback = function (results) {
if (results != undefined) {
results.count = parseInt(results.count);
this.totalCount(isNaN(results.count) ? 0 : results.count);
}
this.querySuccess();
};
return LinkedIn;
})(SocialAPI);
In the <span data-bind="text: totalCount"></span>, I expect to see a number ranging from 0-Integer.MAX. Instead I see the following:
As you can see, its outputting the knockout function itself, not the value of the function. Every code example I've seen, including those in the official documentation, says that I should be seeing the value, not the function. What am I doing wrong here? I can provide the full application code if needed.

Not sure, but KO view models obviously tend to bind own (not inherited through prototypes) observable properties only. So you should rewrite your code to supply totalCount observable for every social network separately.

Showing an Array using JSON from Database in Ember

Well, I guess I am encountering a bit of an issue again here. I will explain what I am trying to do.
I have a teammembers template in which I want to show Team Members & their specific information from a specific team. For that I have to join 3 tables.
This query should give you an idea:
SELECT *
FROM teams_members tm
inner join members m on tm.members_member_id=m.id
inner join teams t on tm.team_team_id=t.id
WHERE
t.team_name='Vancouver Canuck'
What I initially thought that I can make a simple array and simply do pushObject. But It's not working & and moreover, how would I show them?
Here's what I tried:
App.Model = Ember.Object.extend({});
App.TeammembersController = Ember.ObjectController.extend({
teammembers : [], //This is for getTeamMembers Action, Coming as undefined
selectedTeam : null,
team : function() {
var teams = [];
$.ajax({
type : "GET",
url : "http://pioneerdev.us/users/getTeamNames",
success : function(data) {
for (var i = 0; i < data.teams.length; i++) {
var teamNames = data.teams[i];
teams.pushObject(teamNames);
}
}
});
return teams;
}.property(),
actions : {
getTeamMembers : function() {
teamName = this.get('selectedTeam.team_name');
data = {
team_name : this.get('selectedTeam.team_name'),
};
if (!Ember.isEmpty(teamName)) {
$.ajax({
type : "POST",
url : "http://pioneerdev.us/users/getTeamMembers",
data : data,
dataType : "json",
success : function(data) {
for (var i = 0; i < data.teammembers.length; i++) {
var teamNames = data.teammembers[i].firstname;
teammembers.pushObject(teamNames);
}
}
});
return teammembers;
console.log(teammembers);
} else {
}
}
}
});
I am getting teammember array as undefined in this. The snippet in actions will be responsible for spitting out Team Member's information when Team Name is selected from Ember.Select.
Thanks to https://stackoverflow.com/users/59272/christopher-swasey, I was able to re-use my snippet here:
<script type="text/x-handlebars" id="teammembers">
<div class="row">
<div class="span4">
<h4>Your Team Members</h4>
{{view Ember.Select
contentBinding="team"
optionValuePath="content.team_name"
optionLabelPath="content.team_name"
selectionBinding="selectedTeam"
prompt="Please Select a Team"}}
<button class="btn"
{{action 'getTeamMembers' bubbles=false }}>Get Team Members</button>
</div>
</div>
</script>
Moreover, what will user do, he will select the team from Ember.Select & when he clicks the button, somewhere I should be able to spit out team members & their information. In future, I might want to grab ids and delete them from server as well. How would I do that as well?
So, should I use custom views or is there some other way to do this?

There is an issue with the code that populates properties from ajax. For example the code of property team of App.TeammembersController does the following
1.initializes a local array variable teams
2.uses ajax to retrieve asynchronously the data from server
2.1.meanwhile the teams array within the ajax callback gets populated but never returned at the proper state of including data. It is required to set the controller's property once the teams array has been populated with the data. Then ember's binding will take care of the rest (populate controller's property, notify any other object interested, event the template to render the results)
3.and returns the empty teams array
So, you need to add two lines of code as follows,
team : function() {
var teams = [];
var self = this;/*<- */
$.ajax({
type : "GET",
url : "http://pioneerdev.us/users/getTeamNames",
success : function(data) {
for (var i = 0; i < data.teams.length; i++) {
var teamNames = data.teams[i];
teams.pushObject(teamNames);
}
self.set("team",teams);/*<- */
}
});
return teams;
}.property()
The same should happen for the other properties you retrieve from ajax.
EDIT1
Below is an example based on your code. The code has been moved inside the IndexController and the button doing some action has been disabled for simplicity.
http://emberjs.jsbin.com/IbuHAgUB/1/edit
HBS
<script type="text/x-handlebars" data-template-name="index">
<div class="row">
<div class="span4">
<h4>Your Team Members</h4>
{{view Ember.Select
content=teams
optionValuePath="content.team_name"
optionLabelPath="content.team_name"
selection=selectedTeam
prompt="Please Select a Team"}}
<button class="btn"
{{action 'getTeamMembers' bubbles=false }} disabled>Get Team Members</button>
</div>
</div>
selected team:{{selectedTeam.team_name}}
</script>
JS
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.Model = Ember.Object.extend({});
App.IndexController = Ember.ObjectController.extend({
test:"lalal",
teammembers : [],
selectedTeam : null,
teams : function() {
//var teams = [];
var self = this;
/*$.ajax({
type : "GET",
url : "http://pioneerdev.us/users/getTeamNames",
success : function(data) {
for (var i = 0; i < data.teams.length; i++) {
var teamNames = data.teams[i];
teams.pushObject(teamNames);
}
}
});*/
setTimeout(function(){
var data = [{team_name:'team1'}, {team_name:'team2'}, {team_name:'team3'}];//this will come from the server with an ajax call i.e. $.ajax({...})
self.set("teams",data);
},1000);//mimic ajax call
return [];
}.property(),
actions : {
getTeamMembers : function() {
teamName = this.get('selectedTeam.team_name');
data = {
team_name : this.get('selectedTeam.team_name')
};
if (!Ember.isEmpty(teamName)) {
/*$.ajax({
type : "POST",
url : "http://pioneerdev.us/users/getTeamMembers",
data : data,
dataType : "json",
success : function(data) {
for (var i = 0; i < data.teammembers.length; i++) {
var teamNames = data.teammembers[i].firstname;
teammembers.pushObject(teamNames);
}
}
});*/
return teammembers;
} else {
}
}
}
});
The same concept can be followed to retrieve any data from the server and modify/delete it as well. Just have in mind that all requests are async and within the callback functions you should update your ember app model/data, then ember bindings do all the magic.
EDIT2
In order to show the team members in a separate view (based on last comments) once the team is selected, either by clicking the button or from another bound property you may request via ajax the members for the selected team id (unless you have already loaded them eagerly) you can render the property of teammembersinside an included view or partial. For instance the same example and when the button is pressed members appear (without logic hardcoded but async lazy loaded data),
http://emberjs.jsbin.com/IbuHAgUB/2/edit
HBS
<script type="text/x-handlebars" data-template-name="_members">
<i>this is a partial for members</i>
{{#each member in teammembers}}<br/>
{{member.firstName}}
{{/each}}
</script>
JS
App.IndexController = Ember.ObjectController.extend({
test:"lalal",
teammembers : [],
selectedTeam : null,
teams : function() {
var self = this;
setTimeout(function(){
var data = [{team_name:'team1'}, {team_name:'team2'}, {team_name:'team3'}];//this will come from the server with an ajax call i.e. $.ajax({...})
self.set("teams",data);
},1000);//mimic ajax call
return [];
}.property(),
actions : {
getTeamMembers : function() {
var self = this;
setTimeout(function(){
var data = [{firstName:'member1'}, {firstName:'member2'}];//this will come from the server with an ajax call i.e. $.ajax({...})
self.set("teammembers",data);
},1000);//mimic ajax call
}
}
});

Using ember's containerView class, how do I push a named view into the childView array?

The documentation provides an example:
aContainer = Ember.ContainerView.create({
childViews: ['aView', 'bView', 'cView'],
aView: Ember.View.create(),
bView: Ember.View.create(),
cView: Ember.View.create()
});
This is really neat, however if I want to write a function that adds views when called, how do I name each view that I create? for example:
aContainer = Ember.ContainerView.create({
childViews: [],
newView: function( input ){
var newView = BaseView.create({ field: input });
this.get('childViews').pushObject( newView );
}
});
this seem to push an anonymous view into the container. Any thoughts on how to name it?
For example, it'd be neat to have a snippet that says:
newView: function( input ){
var name = 'view_' + this.get('childViews').get('length') + 1
var newView = BaseView.create({ field: input, meta: name })
this.get('childViews').pushObject( newView );
}
Thank you.

I don't think there's a meta attribute to add named views. But you can always just assign them yourself.
newView: function( input ){
var name = 'view_' + this.get('childViews.length') + 1
var newView = BaseView.create({ field: input });
this.get('childViews').pushObject( newView );
this.set(name, newView);
}

YUI Datatable - "Data Error."

I'm trying to make a datatable using YUI with JSON returned data.
Included is the json returned data, and the page data displayed.
JSON Data:
[{"supplier_id":"127","name":"Adams Farms","description":"","ofarm":"1","active":"1"},{"supplier_id":"141","name":"Barriger Farms","description":"","ofarm":"1","active":"1"}]
Javascript for YUI:
<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.JSON = function() {
var myColumnDefs = [
{key:"supplier_id", label:"ID"},
{key:"name", label:"Name"},
{key:"description", label:"Notes"},
{key:"ofarm", label:"Ofarm"},
{key:"active", label:"Active"}
];
var myDataSource = new YAHOO.util.DataSource("ajax/select/supplier");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.responseSchema = {
fields: ["supplier_id","name","description","ofarm","active"]
};
var myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs,
myDataSource);
return {
oDS: myDataSource,
oDT: myDataTable
};
}();
});
</script>
Page View:
YUI Test (header)
This example populates a DataTable with data. (intro text)
ID - Name - Notes - Ofarm - Active (column titles)
Data error. (returned data)

According to YUI dataSource page, YUI dataSource expectes an JavaScript object, not an array of objects. And when using JSON, use must set a resultsList on the responseSchema property. Something as (Notice dataSourceSettings.responseSchema.fields property)
(function() {
var YdataTable = YAHOO.widget.DataTable,
YdataSource = YAHOO.util.DataSource;
var settings = {
container:"<DATATABLE_CONTAINER_GOES_HERE>",
source:"<URL_TO_RETRIEVE_YOUR_DATA>",
columnSettings:[
{key:"supplier_id", label:"ID"},
{key:"name", label:"Name"},
{key:"description", label:"Notes"},
{key:"ofarm", label:"Ofarm"},
{key:"active", label:"Active"}
],
dataSourceSettings:{
responseType:YdataSource.TYPE_JSON,
responseSchema:{
resultsList:"<DOT_NOTATION_LOCATION_TO_RESULTS>",
fields:[
{key:"supplier_id"},
{key:"name"},
{key:"description"},
{key:"ofarm"},
{key:"active"}
]
}
},
dataTableSettings:{
initialLoad:false
}
}
var dataTable = new YdataTable(
settings.container,
settings.columnSettings,
new YdataSource(
settings.source,
settings.dataSourceSettings),
settings.dataTableSettings);
})();

As a side note, I found this page when looking for the cause of "Data error" in a YUI datatable, and I eventually found out that I was missing the /build/connection/connection-min.js script reference on my web page.