i am trying to learn backbone.js
trying to get data from php then display it by model, view and route of backbone.js
but its not displaying my data, it displaying [object Object]
you can see output here::
http://php-backbone.gopagoda.com/
and the source code::
https://github.com/foysal-mamun/php-backbone
i have console.log my this.model, you can see my data in::
this.model.attributes.message
please help me how can i fix this.
Thanks.
Change like below in your router.
this.messageModel.fetch({success: function () {
$('#msg').html(this.messageView.render().el);
}}
and change like below in your render function.
$(this.el).html(this.template(this.model.attributes));
Related
I've the following code that displays table of data using ng-repeat, initially the model (array) will have no data, but upon request to an api it receives some data that i'm trying to update my model with, but unfortunately my view is not getting refreshed with model updates though I see that my model contains the new data that was received from api call.
Component code:
app.component('fooList', {
bindings: {
foo: '<'
},
templateUrl: '/app/foo.html',
controllerAs: 'list',
controller: function ($http,$scope) {
let list=this;
list.search=()=>{
$http.get('/ui/foo/'+ list.searchCriteria)
.success(response=>{
list.foo.searchResults=response.searchResults;
})
}
}
});
HTML View:
<tr ng-repeat="foo in ::list.foo.searchResults">
<td>{{::foo.name}}</td>
<td>{{::foo.address}}</td>
</tr>
I've tried the following so far which didn't help
Setting the list.foo.searchResults to undefined initially, which is working fine for the first time, but if I send a different search criteria then again it is not refreshing.
$scope.$apply(), which I hate to do, but tried which is throwing digest in progress error.
Inside the success of $http i've tried the below code
list.foo.searchResults=0;
list.foo.searchResults.push.apply(list.foo.searchResults,response.searchResults);
Created one more child component and replaced my html with the child template and moved the code to populate the array in to that component.
Any help is really appreciated.
You have to remove one time data binding.
<tr ng-repeat="foo in list.foo.searchResults">
<td>{{foo.name}}</td>
<td>{{foo.address}}</td>
</tr>
Try removing :: or can you give a jsfiddle to work on
:: is used to provide one way databinding , please remove it and then try
::if you are using this, even if your model is getting updated it will not allow to update view.
You may try to update in the view section while you are fetching data from service, use $scope.$apply() in your controller section, where your are taking value from service(means storing in array).
or remove :: from your html part because its give to one way binding in angularjs.
In my Angular application,I am having a controller for category.
In which (It has to check weather the customer is selected or not.If not it has to redirect to customer view page.
Working fine.(But when redirecting to customer page -customer list is populating in component constructor -not loading in view page)
After few seconds(almost 10-15 )seconds.
It is loading in View Page.
But if i open customer page by clicking the menu.(data loading is Fine).Why is this issue occurring
I have used some jquery inside typsecript for click functions and so.
I will post my code along with this please verify and help me.
Thank you.
constructor(private sidepageadd:SidePageAddService, private router:Router ,private zone:NgZone)
{
this.category_id=this.sidepageadd.getcategory_id();
this.categoryName=sidepageadd.getcategoryName();
this.customer_id=this.sidepageadd.getcustomer_id();
this.employee_id=this.sidepageadd.getemployee_id();
if(this.customer_id==undefined){
toastr["error"]("Kindly Choose a customer to Begin with!");
this.router.navigate( ['/home', {outlets: {'menu': 'home/viewCustomer'}}]);
}
else if(this.category_id==undefined){
alert("Choose a category");
}
var catName=this.categoryName;
if($('#catName').text()!=catName){
$('#catName').text(catName);
}
}
and after view seconds view is populating like this
I had similar issue before,
i used jquery for DOM manipulation
learn to use viewchild, Renderer,Elementref etc and use queryselector for manipulating dom inside typescript code.
Go through this link:
https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02
(I learned from here)
I guess this will help you.
My Backbone Model is fetching data from an API as JSON
the structure is like:
releases
tracks
length
Now I specifically want to the lenght of a track. How do achieve that?
I tried to do
afterRender: function(){
this.model.get('releases.tracks.length');
console.log(track);
}
but that didnt work, gives me 'undefined'
please help
I am having a problem with Photoswipe and Angular. Basically what I'm doing is get the images from my server using $http.post and then pushing those objects into my array of images, then I'm initializing Photoswipe.
In my success I have something like this:
$scope.gallery.push(images from server);
myPhotoSwipe.initialize()
But I get this error: Code.PhotoSwipe.createInstance: No images to passed, so the initialize is getting fired before all my items are in the view.
I can see all the images in my view but of course they are not attach to Photoswipe, any idea of how can I initialize it only after all my images are in the view?
PS: I have already tried this: How can I get directive to fire after view loaded? but it didn't work for me
Thanks!
I have a simple backbone.js app. I want to render a view into the DOM of the HTML page, this view is a detail view for a model. My HTML page already has the DIV element that I want to render the view into. If I try to render my view like this:
detailView = new RulesPanelView({model : #model})
$("#detail").html(detailView.render().el)
It fails and I get [Object HTMLDivElement] inserted into the DOM, not my rendered HTML.
This is the only way I can get it to work and it seems like a hack:
$("#detail").html('')
detailView = new RulesPanelView({model : #model})
$("#detail").append(detailView.render().el)
Having to empty the HTML of the DIV before rendering so I don't get multiple views rendered inside #detail which is what would happend with append.
Also aren't I creating way too many views this way, just seems cleaner to replace the HTML as in the first code segment?
What is the correct way to render this view?
What you want is to pass the already inserted DOM node to the view as a 'el' option to the constructor:
new RulesPanelView({el: $("#detail")});
This way, it won't render again. You still need to make sure your view's 'render' method will be able to render a correct view from an updated model, though.
The backbone documentation mentions this as a good way to avoid rendering too much stuff at once.
I actually append in the render method of the view. This doesn't work if you want to re-render when models change - but for that I've added a refresh method that render actually calls before appending. I then bind the refresh to the model change (if I need that). So in my View, I do this:
render: function(){
var markup = this.refresh();
$(markup).appendTo('#some-selector');
return this;
},
refresh: function(){
return $(this.el).html($.mustache(this.template, this.model.toJSON()));
},
Not sure if that's the "best", but I think it works pretty well. I've also seen where you have a collection bound to a view that loops through all of the models and renders "sub-views" of the collection view - this provides a nicer programmatic approach than hard-coding where you're going to append.