Backbone: Can't access 'this.model.*' in view - backbone.js

I'm new to Backbone and struggling with what appears to be a basic problem. I have a route set up to take in a parameter, use it to locate a model (hard-coded at this point), and render the model data in a view.
Working with a parameter of "project1", in the render function of my view I can access this.model and project1.attributes and project1.get('name') but I cannot access this.model.attributes or this.model.get('name') or use this.model.toJSON(). (Note: trying to access any of those latter ones causes the app to bomb.)
Is this a "this" bind problem? Any help is appreciated.
var Router = Backbone.Router.extend({
routes: {
"work/:project" : "project"
},
project: function (project) {
$('#content').html(new ProjectView({model:project}).render().el);
}
});
var ProjectView = Backbone.View.extend({
id: "project",
render: function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
var Project = Backbone.Model.extend({});
var project1 = new Project({
name: "Project1",
description : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
});

As the comments have already mentioned, your basic problem is that you're passing a string to a View, but that View is expecting a Model. This line:
$('#content').html(new ProjectView({model:project}).render().el);
Is the problem: project needs to be an instance of Backbone.Model, but it's not. That line should instead look something like this:
var project1 = new Project({
name: "Project1",
description : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
});
$('#content').html(new ProjectView({model: project1}).render().el);

Related

how to change the position of Checkbox in sweetalert 2

I'm looking for a way to find if it is possible to change the position of the checkbox in sweetalert 2 from the center to the upper position? I used this code:
(async () => {
const { value: accept } = await Swal.fire({
title: 'Terms and conditions',
input: 'checkbox',
inputValue: 1,
inputPlaceholder:
'Yes, I agree to receive an email, including educational materials, product and company announcements, and community even information, from T&C. I can unsubscribe at any time. I would like to opt into receiving marketing communications as outlined above.',
confirmButtonText:
'Continue <i class="fa fa-arrow-right"></i>',
inputValidator: (result) => {
return !result && 'You need to agree with T&C'
}
})
if (accept) {
Swal.fire('You agreed with T&C :)')
}
})()
The result of this code is this:
I would like to change the checkbox from the center to the position of the word "Yes".
Use the customClass param to achieve the custom placement for the input:
Swal.fire({
input: 'checkbox',
inputPlaceholder: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
customClass: {
input: 'top-checkbox'
}
})
.top-checkbox input {
align-self: flex-start;
margin: 3px 10px 0 0 !important;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>

In Angular JS, is there a way to watch for changes to the DOM without using scope.watch?

I am attempting to create an angularjs bootstrap accordion that scrolls the accordion to the top when opened.
These solutions are close to what I would like to do:
AngularJS / ui-bootstrap accordion - scroll to top of active (open) accordion on click
https://www.peterbouda.eu/making-an-angular-ui-bootstrap-accordion-scrolling-to-top-when-opening.html
However, they use a timeout or scope watches. I would like to avoid using these unless absolutely necessary.
Is there a way to accomplish this without using $watch or setTimeout?
Here is a plunk of what i am trying to do, this is using the $watch: https://plnkr.co/edit/XQpUdrdjqaCGom4L9yIJ
app.directive( 'scrollTop', scrollTop );
function scrollTop() {
return {
restrict: 'A',
link: link
};
}
function link( scope, element ) {
scope.collapsing = false;
var jqElement = $( element) ;
scope.$watch( function() {
return jqElement.find( '.panel-collapse' ).hasClass( 'collapsing' );
}, function( status ) {
if ( scope.collapsing && !status ) {
if ( jqElement.hasClass( 'panel-open' ) ) {
$( 'html,body' ).animate({
scrollTop: jqElement.offset().top - 30
}, 500 );
}
}
scope.collapsing = status;
} );
}
The directive can be simplified to:1
app.directive( 'scrollTop', function scrollTop($timeout) {
return {
restrict: 'A',
link: postLink
};
function postLink(scope, elem, attrs) {
elem.on("click", function(e) {
if (scope.status.isOpen) {
$timeout(function() {
$( 'html,body' ).animate({
scrollTop: elem.offset().top - 30
}, 500 );
});
}
});
}
})
<uib-accordion>
<div heading="Section Title" is-open="status.isOpen"
ng-repeat="section in vm.sections"
scroll-top
uib-accordion-group>
<uib-accordion-heading>
<div ng-class="{isOpen: vm.isOpen}">
<h3>{{section.sectionTitle}}</h3>
<p>{{section.sectionSubHeader}}</p>
</div>
</uib-accordion-heading>
<div class="clearfix">
<b>Index+1={{$index+1}}</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</uib-accordion>
The $timeout is necessary because the browser needs to render the DOM with the newly opened and closed elements before it can compute the proper scroll offset.
The DEMO on PLNKR
I have found a way to do this from the controller.
I added a function that is triggered on ng-click to report the is-open status of the accordion.
Using the component lifecycle hook $doCheck I was able to watch for changes to the state of vm.isOpen. $doCheck runs on the end of every digest cycle, so I did not need to set a $scope.watch or $timeOut
The $doCheck runs essentially the same code as the directive in the question
app.controller('homeController', function($state, $element, sections, $transitions) {
var vm = this;
vm.$onInit = function() {
vm.sections = sections.getSections();
};
function updateOpenStatus() {
vm.collapsing = false;
vm.isOpen = vm.sections.some(function(item) {
return item.isOpen;
});
}
vm.$doCheck = function() {
if (vm.isOpen) {
var elem = $element.find('.panel-collapse');
var status = elem.hasClass('collapsing');
if (vm.collapsing && !status) {
var parentElem = elem.closest('.panel-open');
if (elem.parent().hasClass('panel-open')) {
$('html,body')
.stop()
.animate({
scrollTop: parentElem.offset().top - 52
}, 'fast');
}
}
vm.collapsing = status;
}
};
});
I updated the uib-accordion to call the function in the controller
<uib-accordion>
<div heading="Section Title" is-open="section.isOpen" ng-repeat="section in vm.sections" scroll-top uib-accordion-group>
<uib-accordion-heading>
<div ng-class="{isOpen: section.isOpen}" ng-click="vm.toggleOpen()">
<h3>{{section.sectionTitle}}</h3>
</div>
</uib-accordion-heading>
<div class="clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</uib-accordion>
Updated Plnkr: https://plnkr.co/edit/5EqDfmVOa0hzFfaQqdI0?p=preview

Api-platform accessing embedded relations in hydra:member

I'm using Api-Platform and React as client.
I have a Forum entity which contains other objects : an author (User entity) and a category (Category entity).
I embedded these entities with #Groups annotations to retrieve them more easily.
For instance, when I fetch /api/forums/ on Postman I get this result :
{
"#context": "/api/contexts/Forum",
"#id": "/api/forums",
"#type": "hydra:Collection",
"hydra:member": [
{
"#id": "/api/forums/79",
"#type": "Forum",
"id": 79,
"subject": "Sujet numéro 0",
"message": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"category": {
"#id": "/api/categories/183",
"#type": "Category",
"title": "Category 2"
},
It seems good : we can see my category object is linked to Forum in hydra:member array, and a "title" field.
But I noticed that the result I really get is different in my react app for all my nested objects.
I only get the IRIs..
For instance with the same request :
...
fetch('forums')
.then(response =>
response
.json()
.then(retrieved => ({ retrieved, hubURL: extractHubURL(response) }))
)
.then(({ retrieved, hubURL }) => {
retrieved = normalize(retrieved);
...
I get this result :
{
"#context": "/api/contexts/Forum",
"#id": "/api/forums",
"#type": "hydra:Collection",
"hydra:member": [
{
"#id": "/api/forums/79",
"#type": "Forum",
"id": 79,
"subject": "Sujet numéro 0",
"message": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"category": "/api/categories/183",
Every other fields have disapeared on "category", and I don't get why.
Could anyone help me with that ?
Thanks in advance
I found the solution (how silly of me), so I share you the tip :
In src/utils/dataAccess file, there is a normalize function :
export function normalize(data) {
if (has(data, 'hydra:member')) {
// Normalize items in collections
data['hydra:member'] = data['hydra:member'].map(item => normalize(item));
return data;
}
// Flatten nested documents
return mapValues(data, value =>
Array.isArray(value)
? value.map(v => get(v, '#id', v))
: get(value, '#id', value)
);
}
It appears that this function is called after each fetch :
return fetch(id)
.then(response =>
response
.json()
.then(retrieved => ({ retrieved, hubURL: extractHubURL(response) }))
)
.then(({ retrieved, hubURL }) => {
//retrieved = normalize(retrieved);
dispatch(loading(false));
dispatch(success(retrieved));
....
As you can see, I just commented the normalize line (useless in my case). Do that wherever it is needed, and everything should work again !

Split string from file txt

The C program must split the string when it finds ! or ? or .
The string must contain the \n newline and ! or ? or . where it is present. An example of the file test.txt
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur Quis autem vel eum
iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
my code reads up to the first token, where am I wrong?
int main(){
FILE *file;
char stringa[MAXCHAR];
file = fopen ("prova.txt", "r");
if (file == NULL){
perror("errore nell'apertura del file");
return (1);
}
while (fscanf(file, "%[^!?.]", stringa) != EOF) {
printf("Data from file:\n%s", stringa);
//break;
}
fclose(file);
return 0;
}
my output:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua
Thanks for your help...
It exits because you used break as soon as you spot the ., ? or ! in input.
I believe what you want is to replace any of these three characters in input stream by \n.
If that's the case then replace break by printf("\n")
Your code reads up to the first token found but it puts back the tokens so even without the "break" your program will not read any further , it will go into an infinite loop because your while condition isn't so well defined , it should be :
while (fscanf(file, "%[^!?.]", stringa) == 1) //checks if text was read successfully
Also you need to get rid of any tokens when encountered , this should do it:
while (fscanf(file, "%[^!?.]", stringa) == 1) {
printf("Data from file: %s\n", stringa);
fscanf(file,"%*[!?.]");
}

How to pass an Argument to Method in Perl

I'm trying to use this Perl Method: HTML::Highlight - A module to highlight words or patterns in HTML documents.
The methode itself isn't acctualy the problem but the way how I can pass a Attribute.
Example which works:
use HTML::Highlight;
$text = 'Lorem ipsum Velit ullamco ex anim quis Duis laboris ut proident velit eu dolor Ut amet proident aliqua minim officia sunt commodo veniam dolor id reprehenderit reprehenderit non nulla incididunt mollit exercitation minim commodo ut quis laboris ex proident.';
# create the highlighter object
my $hl = new HTML::Highlight (
words => [
'ex',
'ul',
],
wildcards => [
undef,
],
colors => [
'red; font: bold',
],
debug => 0
);
my $hl_document = $hl->highlight($text);
print $hl_document;
What I'd like to do is something like this:
use HTML::Highlight;
$text = 'Lorem ipsum Velit ullamco ex anim quis Duis laboris ut proident velit eu dolor Ut amet proident aliqua minim officia sunt commodo veniam dolor id reprehenderit reprehenderit non nulla incididunt mollit exercitation minim commodo ut quis laboris ex proident.';
# create the highlighter object
#keywords = "ex", "ul";
my $hl = new HTML::Highlight (
words => #keywords,
wildcards => [
undef,
],
colors => [
'red; font: bold',
],
debug => 0
);
my $hl_document = $hl->highlight($text);
print $hl_document;
As you can see in the code snippet above, I'd like to pass an existing array to the object.
How can I do that correctly?
Currently I get an exeption like that:
HTML::Highlight - "words" and "wildcards" parameters must be references to arrays at C:\Skripts\Perl\syntax_highlight.pl line 8.
As said in error message, pass a reference:
my $hl = HTML::Highlight->new(
words => \#keywords,
# here __^
wildcards => [
undef,
],
colors => [
'red; font: bold',
],
debug => 0
);

Resources