I am using angularjs with django. In my html page, I am doing the following:
<div ng-repeat="loc in locations" ng-init="locIndex = $index" ng-show="tab===1">
Id: {[{loc[0]}]}
Location Name: {[{loc[1]}]
</div>
Now, what I am interested in doing is:
<div ng-repeat="loc in locations" ng-show="tab===1">
Id: {[{loc[0]}]}
Location Name: {[{loc[1]}]
</div>
<div ng-repeat="cloc in childLocation{[{loc[0]}]}">
Child Id:{[{loc[0]}]}
Child Location Name: {[{loc[1]}]
</div>
In app.js, i will initialize the childlocations when the user will click the parent location
$scope.getChildLocations=function(locationId){
$http({
method: "get",
url: '/get_child_locations?locationId='+locationId,
}).success(function(data, status) {
childLocation='childLocation'+location
$scope.childLocation=data;
});
}
Is it possible to do this. If yes, how as i am getting an error in this..
You are getting an error because loc is not defined in your second ng-repeat since it is not nested.
Try:
<div ng-repeat="loc in locations" ng-show="tab===1">
Id: {[{loc[0]}]}
Location Name: {[{loc[1]}]
<div ng-repeat="cloc in childLocation{[{loc[0]}]}">
Child Id:{[{loc[0]}]}
Child Location Name: {[{loc[1]}]
</div>
</div>
Related
I am fetching some data using Apollo inside of Nuxt. Somehow, when navigating to that page I get an error of
Cannot read property 'image' of undefined
When I refresh the page, everything works as expected.
I have a found a few threads of people having similar issues but no solution seems to work for me :/
This is my template file right now:
/products/_slug.vue
<template>
<section class="container">
<div class="top">
<img :src="product.image.url"/>
<h1>{{ product.name }}</h1>
</div>
</section>
</template>
<script>
import gql from 'graphql-tag'
export default {
apollo: {
product: {
query: gql`
query Product($slug: String!) {
product(filter: { slug: { eq: $slug } }) {
slug
name
image {
url
}
}
}
`,
prefetch({ route }) {
return {
slug: route.params.slug
}
},
variables() {
return {
slug: this.$route.params.slug
}
}
}
}
}
</script>
Basically the $apolloData stays empty unless I refresh the page. Any ideas would be much appreciated
EDIT
Got one step closer (I think). Before, everything (image.url and name) would be undefined when navigating to the page for the first time.
I added:
data() {
return {
product: []
};
}
at the top of my export and now at least the name is always defined so if I remove the image, everything works as expected. Just the image.url keeps being undefined.
One thing I noticed (not sure how relevant) is that this issue only occurs using the , if I use a normal a tag it works but of course takes away the vue magic.
EDIT-2
So somehow if I downgrade Nuxt to version 1.0.0 everything works fine
I stumbled on this issue as well, and found it hidden in the Vue Apollo documents.
Although quite similar to the OP's reply, it appears the official way is to use the "$loadingKey" property.
It's quite confusing in the documents because there are so many things going on.
https://vue-apollo.netlify.com/guide/apollo/queries.html#loading-state
<template>
<main
v-if="!loading"
class="my-8 mb-4"
>
<div class="w-3/4 mx-auto mb-16">
<h2 class="mx-auto text-4xl text-center heading-underline">
{{ page.title }}
</h2>
<div
class="content"
v-html="page.content.html"
></div>
</div>
</main>
</template>
<script>
import { page } from "~/graphql/page";
export default {
name: 'AboutPage',
data: () => ({
loading: 0
}),
apollo: {
$loadingKey: 'loading',
page: {
query: page,
variables: {
slug: "about"
}
},
}
}
</script>
If you need to use a reactive property within vue such as a slug, you can do so with the following.
<template>
<main
v-if="!loading"
class="my-8 mb-4"
>
<div class="w-3/4 mx-auto mb-16">
<h2 class="mx-auto text-4xl text-center heading-underline">
{{ page.title }}
</h2>
<div
class="content"
v-html="page.content.html"
></div>
</div>
</main>
</template>
<script>
import { page } from "~/graphql/page";
export default {
name: 'AboutPage',
data: () => ({
loading: 0
}),
apollo: {
$loadingKey: 'loading',
page: {
query: page,
variables() {
return {
slug: this.$route.params.slug
}
}
},
}
}
</script>
I think it's only a problem of timing on page load.
You should either iterate on products, if you have more than one, or have a v-if="product != null" on a product container, that will render only once the data is fetched from GraphQL.
In that way you'll use the object in your HTML only when it's really fetched and avoid reading properties from undefined.
To fix this, you add v-if="!$apollo.loading" to the HTML container in which you're taying to use a reactive prop.
I am trying to send tabs id to the the server from Django template. I want to send the selected tab's ID after submit the page. Is there any way to do that? Or How can I put my id into my url? Thank you in advance.
Here is my tab list:
<ul class="nav nav-tabs" role="tablist"˛id="myTab">
<li><i class="fa fa-sun-o"></i>MyFirstTab</li>
<li><i class="fa fa-cloud"></i>MySeconfTab</li>
</ul>
You could use Javascript (jQuery) to append the current tab ID to the form before it is submitted to the server. Something like this:
$(function() {
$( "#form" ).submit(function( event ) {
var currentTabID = $("ul#myTab li.active a").attr('id');
$('<input>').attr({
type: 'hidden',
name: 'currentTabID',
value: currentTabID
}).appendTo(this);
});
});
Then, in your Django view, you can access that data via request.POST.get("currentTabID")
I have created a dialog box using the ember-modal-dialog. The content that is going to displayed in the dialog is received from the server. I am able to make the call to server and fetch the data. But I don't know how to save the data into my model store from actions.
Controller.js
actions:{
fiModal1: function(photo){
Ember.$('body').addClass('centered-modal-showing');
var currentState = this;
photo.toggleProperty('fidialogShowing'))
console.log('opendialog');
raw({
url: 'http://example.co.in/api/photo/'+photo.get('like_pk')+'/likes/',
type: 'GET',
}).then(function(result){
currentState.set('model.feed.liker',result)
});
},
bookmarked:function(liker){
liker.set('is_bookmarked',true)
},
}
feed.hbs
<p {{action "fiModal" photo }}>
{{photo.0.numlikes}}
</p>
{{#if photo.fidialogShowing}}
{{#modal-dialog translucentOverlay=true close = (action "fiDialogClose" photo)}}
{{#each model.feed.liker as |liker}}
<div class = "col-sm-6">
{{#if liker.is_bookmarked}}
<a href {{action "unbookmarked" liker}}>
<img class="foll" src = "images/button-bookmark-secondary-state-dark-b-g.png">
</a>
{{else}}
<a href {{action "bookmarked" liker}}>
<img class="foll" src = "images/button-bookmark.png">
</a>
{{/if}}
</div>
{{/each}}
Now the problem is that when action inside the dialog box is fired it throws an error:
fiver.set is not function
I think that the problem is occurring because I am not saving the result in the model store. How should I do it so the action inside the dialog box also works?
You can just encapsulate the results from your server into Ember.Object
Ember.Object.create(json)
For exemple replace your line
currentState.set('model.feed.liker',result)
by
currentState.set('model.feed.liker', result.map(function(item) {
return Ember.Object.create(item);
})
that way each elements inside your model.feed.liker should have a method 'set' available.
i'm trying to include a Modal, specifically this one: http://awkward.github.io/backbone.modal/ for each one of the models in a collection.
First i tried with a handlebars template, but it didn't work i don't know if it is for using _underscore so i change but i can't see why is not working.
Here is my function that use in the View that executes on a click for a rendered model:
detalleProducto : function(event){
var id = $(event.currentTarget).data('id');
var item = this.collection.get(id);
var templt = _.template("<div class='bbm-modal__topbar'>\
<h3 class='bbm-modal__title'> <%= item.nombre %> </h3>\
</div>\
<div class='bbm-modal__section'>\
<img src='img/modal/ <%= item.imagen %>' />\
<p><%= item.descripcion %></p>\
<p><%= item.presentacion %></p>\
</div>\
<div class='bbm-modal__bottombar'>\
<a href='#' class='bbm-button'>Close</a>\
</div>"
);
var tmpl = templt({item: item.attributes});
var Modal = Backbone.Modal.extend({
template: tmpl,
cancelEl: '.bbm-button'
});
var modalView = new Modal();
$('#app').html(modalView.render().el);
},
In the console says me Uncaught TypeError: Property 'template' of object [object Object] is not a function.
So, maybe im not passing the template correctly??
I appreciate all or your help.
Thanx...
I am creating a new Ember.Model with a return response from an ajax call.
This is the ajax method i have in the controller
createImageResource: function() {
var self = this,
fd = new FormData(),
newResource = {},
resources = self.get('controllers.resources.model'),
fileName = this.get('resource_image').name,
fileSize = this.get('resource_image').size,
fileType = this.get('resource_image').type;
fd.append('resource[resource_type]', 'image');
fd.append('resource[resource_name]', this.get('resource_name'));
fd.append('resource[source_id]', this.get('source_id'));
fd.append('resource_image[resource_image]', this.get('resource_image'));
fd.append('resource[resource_file_name]', fileName);
fd.append('resource[resource_file_type]', fileType);
fd.append('resource[resource_file_size]', fileSize);
this.set('isProcessingResource', true);
$.ajax({
url: '/resources',
method: 'POST',
dataType: 'json',
processData: false,
contentType: false,
data: fd,
}).then(function(newResourceData) {
newResource = Msmapp.Resource.create(newResourceData.resource);
resources.pushObject(newResource);
self.set('isProcessingResource', false);
self.transitionToRoute('resource', newResource);
});
},
This adds the new resource into the array of objects used by the resources controller. It puts it into the DOM like it should. The issue im having is each object is a link to the individual resource. All of the objects that existed on page load work fine. The object added to the list has the correct url and everything, it just doesnt do anything when you try to navigate.
Im not sure if there is something else i need to do in the .then() ?
This is the template
<section class="column_list">
<ul>
{{#each resource in controller }}
<li class="item">
{{#if resource.isLoading }}
{{spinner}}
{{else}}
{{#linkTo 'resource' resource }}
<img {{bindAttr src='resource.listAvatar'}} />
<div class='title'>{{ resource.resource_name }}</div>
{{/linkTo}}
{{/if}}
</li>
{{/each}}
</ul>
</section>
Since you're adding to resources, that's what you should be looping over too - {{#each resource in resources }}.
Either that or push onto your ArrayController instance directly - this. resources.pushObject(newResource);.