I want to load some data in lazy mode.
In particular, suppose I have an object like this one:
$scope.person = {
name: 'Stefano',
surname: 'Rossi',
address: 'Orange Road',
city: {
clazz: 'foo.bar.City',
id: 5,
lazy: true
}
}
With angular I can bind the first three properties to an html tag without problem.
<input ng-model="person.name">
<input ng-model="person.surname">
<input ng-model="person.address">
And it works well.
But suppose that I want to add a decode of city, I would be possible interact ngBinding or ngModel for test if the object is lazy, so with a promise get the real value (I think get by $http service )
I try extend ngmodel but not have the correct $scope...
https://jsfiddle.net/qq4gqn6t/13/
Anybody knows how to interact with ngmodel o ngbinding?
Thanks in advance
Due to two-way data binding models could be lazy loaded once mounted on the view.
Here is a rough example loading the model upon an event giving you the ability to make any additional changes.
$scope.loadlater = function() {
$scope.person = {
name: 'Stefano',
surname: 'Rossi',
address: 'Orange Road',
city: {
clazz: 'foo.bar.City',
id: 5,
lazy: true
}
}
}
https://jsfiddle.net/qq4gqn6t/14/
Related
I wanted to implement mat select box or just html select box with live search functionality and found mat-select-search project implemented in https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example?file=src%2Fapp%2Fapp.component.html.
It is working perfectly fine but it requires a lot of configuration and in my project I have more than 5 mat-selects with pretty large data set, then found "ngx-select-dropdown" it has minimum configuration but I couldn't configure it for typscript objects, it is working with single type string array.
Here is code
export class AppComponent {
public items: string[] = ['Amsterdam', 'Antwerp', 'Athens','Barcelona',
'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest',
'Zagreb', 'Zaragoza', 'Łódź'];
public ngxControl = new FormControl();
public inputTyped = (source: string, text: string) =>
console.log('SingleDemoComponent.inputTyped', source, text);}
html
<ngx-select [formControl]="ngxControl"
[allowClear]="true"
[defaultValue]="doNgxDefault()"
[items]="items"
placeholder="No city selected"
(typed)="inputTyped('ngx-select', $event)"
</ngx-select>
However I wanted to implement it with this type of items
interface Bank {
bank_id: number;
name: string;
code: string;
ord: number;}
private items: Bank[] = [
{bank_id: 1, name: 'Bank A (Switzerland)', code: 'ARM', ord:10},
{bank_id: 2, name: 'Bank B (Switzerland)', code: 'ARM', ord:11},
{bank_id: 3, name: 'Bank C (Switzerland)', code: 'HIO', ord:12},
{bank_id: 4, name: 'Bank D (Switzerland)', code: 'ARM', ord:13},
{bank_id: 5, name: 'Bank E (Switzerland)', code: 'ARM', ord:14},];
Is it possible use typscript objects with ngx-select for items, because I need to populate the names of each object and get the id's as value property to integrate with database. I am sure that it is possible extracting the names with loop and searching matching options with names but it is not best practice I think.
Updated Answer
Since items:[] gets array of objects property names of items should be exactly as documentation of ngx-select
interface Bank {
id: string;
text: string;
}
Yes its possible. you need see API document https://optimistex.github.io/ngx-select-ex/
optionValueField string 'id' Provide an opportunity to change the name an id property of objects in the items
optionTextField string 'text' Provide an opportunity to change the name a text property of objects in the items
<ngx-select [formControl]="ngxControl"
[allowClear]="true"
[defaultValue]="doNgxDefault()"
[items]="items"
[optionValueField]="bank_id"
[optionTextField]="name"
placeholder="No city selected"
(typed)="inputTyped('ngx-select', $event)"
</ngx-select>
<ngx-select
[(ngModel)]="Value Which You Selected"
[allowClear]="true"
[items]="Bank"
optionTextField="bank_id"
placeholder="Type your Value Here">
<ng-template ngx-select-option ngx-select-option-selected let-option let-text="text">
<span class="color-box" [style]="option.value"></span>
<span [innerHtml]="text" style="color: black"></span>
/ {{option.data.name}} / {{option.data.code}} / {{option.data.ord}}
</ng-template>
</ngx-select>
Assign your Full array in [Items]="" and use the another key values in ngx Template
{{option.data.name}}
{{option.data.code}}
{{option.data.ord}}
If you want to stay with angular material, you can also create your custom wrapper component to avoid boilerplate code, see e.g. Angular ngx-mat-select-search Custom Component.
The wrapper component behaves like a form control and you can adjust it to your needs.
I am currently playing around with a bunch of new technology of Facebook.
I have a little problem with GraphQL schemas.
I have this model of an object:
{
id: '1',
participants: ['A', 'B'],
messages: [
{
content: 'Hi there',
sender: 'A'
},
{
content: 'Hey! How are you doing?',
sender: 'B'
},
{
content: 'Pretty good and you?',
sender: 'A'
},
];
}
Now I want to create a GraphQL model for this. I did this:
var theadType = new GraphQLObjectType({
name: 'Thread',
description: 'A Thread',
fields: () => ({
id: {
type: new GraphQLNonNull(GraphQLString),
description: 'id of the thread'
},
participants: {
type: new GraphQLList(GraphQLString),
description: 'Participants of thread'
},
messages: {
type: new GraphQLList(),
description: 'Messages in thread'
}
})
});
I know there are more elegant ways to structure the data in the first place. But for the sake of experimenting, I wanted to try it like this.
Everything works fine, besides my messages array, since I do not specify the Array type. I have to specify what kind of data goes into that array. But since it is an custom object, I don't know what to pass into the GraphQLList().
Any idea how to resolve this besides creating an own type for messages?
You can define your own custom messageType the same way you defined theadType, and then you do new GraphQLList(messageType) to specify the type of your list of messages.
I don't think you can do this in GraphQL. Think that it's a bit against GraphQL philosophy of asking for the fields "you need" in each component against asking for "them all".
When the app scales, your approach will provoque higher loads of data. I know that for the purpose of testing the library looks a bit too much but it seems this is how it is designed. Types allowed in current GraphQL library (0.2.6) are:
GraphQLSchema
GraphQLScalarType
GraphQLObjectType
GraphQLInterfaceType
GraphQLUnionType
GraphQLEnumType
GraphQLInputObjectType
GraphQLList
GraphQLNonNull
GraphQLInt
GraphQLFloat
GraphQLString
GraphQLBoolean
GraphQLID
I extended the multiselect widget with nothing special. The issue is the binding of values no longer work. In a first sample, I'm using the native widget and binds values fine. The second is where I use an extended multiselect which fails on the value binding and is blank.
HTML:
<selectdata-role="multiselect"data-bind="source: selectData, value: selectedIDs"data-text-field="Name"data-value-field="ID"></select>
<selectdata-role="multiselectcustom"data-bind="source: selectData, value: selectedIDs"data-text-field="Name"data-value-field="ID"></select>
Javascript:
//EXTEND MULTISELECT WITH NOTHING MUCH
kendo.ui.plugin(kendo.ui.MultiSelect.extend({
init: function(element, options) {
kendo.ui.MultiSelect.fn.init.call(this, element, options);
},
options: {
name: 'MultiSelectCustom'
}
}));
varviewModel = kendo.observable({
selectedIDs: [ 1, 3 ],
selectData: [{
Name: 'Bill Smith',
ID: 1
}, {
Name: 'Jennifer Jones',
ID: 2
}, {
Name: 'Tim Philips',
ID: 3
}]
});
kendo.bind('body', viewModel);
I guess I can re-create the binder for "value" again, but is this indeed a bug? I have a jsFiddle that demonstrates this: http://jsfiddle.net/basememara/2Dacw/9/
this isn't a bug so much as that multiselect has custom binders set for it. You can try duplicating the binders for the multiselect for your new extended role.
try this:
kendo.data.binders.widget.multiselectcustom = kendo.data.binders.widget.multiselect;
you can place it before/after your widget extension code, but this should tell the bind function how to properly bind to your widget.
I would also take a look at the kendo docs for custom binders, be warned though it isn't very thourough
I'm trying to set up an Angular Directive so that I can re-use a piece of HTML. I have managed to achieve this, but the problem I am facing is when I want to pass some value into that templated HTML, from the containing HTML.
For simplicity's sake, I will use an example of a customer that has multiple addresses (in this context, the customer is an object and each address instance is another object attached to the customer).
Example of the data:
var customer = {
forename: "John",
surname: "Smith",
address1: {
street: "123 Street",
town: "Georgeville",
},
address2: {
street: "67 Maple Grove",
town: "SomeTown"
}
};
Here is an example of my directive setup:
var module = angular.module(...);
module.directive("address", function () {
return {
restrict: 'A',
templateUrl: '/AddressView.html'
};
});
And my attempted usage:
<div ng-model="customer">
<div address></div>
<div address></div>
</div>
And this is what I would like to do to be able to pass the customer's addresses across to the templated HTML:
<div ng-model="customer">
<div address ng-model="customer.address1"></div>
<div address ng-model="customer.address2"></div>
</div>
I may have misunderstood the purpose of directives, or this may not be possible, but if anyone has any suggestions they would be greatly appreciated.
Let me know if you need me to add any further information.
Edit
Here is a Plunker that I have set up to try to illustrate what I am trying to achieve.
you need to isolate the scope for your directive so that things don't get confused for angular.
And your object is better structure this way:
var customer = {
forename: "John",
surname: "Smith",
addresses: [
address1: {
street: "123 Street",
town: "Georgeville",
},
address2: {
street: "67 Maple Grove",
town: "SomeTown"
}
]
};
this way you can do this:
<div class="customer">
<div address ng-repeat="address in customer.addresses">
{{address.town}} {{address.street}}
</div>
</div>
I don't know why you'r using ng-model here?!
This is an example, but if you provide a plunker with an example code helping you will be easier.
Update:
First your ng-controller was in the wrong place you need to move it up so the address directive could be in the scope of the controller so it could access the address object.
Second you have 2 undefined variables: street and town.
And you need to isolate the scope so each directive don't mess with the variables of the other one.
Here's a working plunker.
Hope this help.
I apologize for being new with backbone but I think I get the concepts.
For example: you have models for a Bookstore > Bookshelf > Book > Page
How would you organize this so the views can be controlled like this:
Bookstore.render() //to view the bookstore
Bookstore.bookshelf.get(shelfId).render() //to view shelf
Bookstore.bookshelf.get(shelfId).book.get(bookId).render() //to view book
Bookstore.bookshelf.get(shelfId).books.get(bookId).pages.at(0).render() //to view page
Is this the correct way to do it?
Yes It's possible and I created for you a working example, I think It's just an other method to organize your Backbone JS architecture and I think It's a pretty good idea.
Explications
All the models must have :
a render method which call the render method of its view. I create a base model that I extend for the Bookshelf, Book and Page model.
a initialize method, It create the collection (books for bookshelves, pages for book...)
Finally I instanced the Bookstore model and It's done !
Code
The demonstration : http://jsfiddle.net/Atinux/DvbA3/show/
Try in the console :
Bookstore.render()
Bookstore.bookshelves.get(1).render()
Bookstore.bookshelves.get(1).books.get(2).render()
Bookstore.bookshelves.get(1).books.get(2).pages.at(0).render()
The code with comments is available here : http://jsfiddle.net/Atinux/DvbA3/
I think the best thing is to understand how the code work. Feel free to ask me if you have problems to understand perfectly my code.
The JSON data
The JSON data have to look like :
var data = {
bookshelves: [{
id: 1,
name: 'Science',
books: [{
id: 1,
name: 'Abstract Algebra',
pages: [
{ content: 'Page 1 Abstract'},
{ content: 'Page 2 Abstract'},
{ content: 'Page 3 Abstract'}
]
}, {
id: 2,
name: 'Chemistry and Technology of Fertilizers',
pages: [
{ content: 'Chemistry page 1' },
{ content: 'Chemistry page 2' },
{ content: 'Chemistry page 3' }
]
}
]
}, {
id: 2,
name: 'Psychology',
books: [{
id: 1,
name: 'How to Think Straight About Psychology',
pages: [
{ content: 'Psychology page 1' },
{ content: 'Psychology page 2' },
]
}
]
}
]
};
#Alley, what you want to do goes against the MVC pattern since your model objects must be agnostic to the view.
#Atinux answer probably works but introduces a direct dependency between your view and model objects.
All presentational methods must reside in you view objects. Communication between view and models must be done using events.
So, instead of doing: Bookstore.bookshelf.get(shelfId).render()
You shall do something along this lines: bookshelfView.render()