CODEWITHSUNDEEP
jquerymaterializeaurelia
sibi
sibi

Reputation: 675

Aurelia Js and materialze component issue

I am new to aurelia js , having a materialise model(popup) for select destination folder. Its not working fine, I need help. Scenario:

upload.html 

<require from="../commontemplate/folder_directory/folder_directory"></require>
<folder_directory></folder_directory> <a class="col  s12 waves-effect waves-light btn ${disabl_chosebtn}" click.delegate="chooseDestiFldr()">Choose</a>

upload.js

cooseDestiFldr() {
  this.folder_directory.load_destiFolder();
  $('#folderDirectory').openModal();
  setTimeout(() => {
    this.attached();
  }, 100);
}

When I click the choose button, it opens the popup.

folder_directory.html

<input type="search" placeholder="Search folder" value.bind="destifolder_srch" keyup.trigger="load_destiFolder()"> print value ${folders}

folder_directory.js

load_destiFolder() {
  this.httpValueConverter.call_http(...).then(data => this.folders = data);
}
attached() {
  this.load_destiFolder()
}

Here, it doesn't print data while popup opens, if typed something in text box, it triggers the function and bind the data.

PS: I am manually triggering this.folder_directory.load_destiFolder(); what is the right way to use common component.

Upvotes: 0

Views: 66

Answers (2)

Ashley Grant
Ashley Grant

Reputation: 10887

I'm kind of surprised that the line $('#folderDirectory').openModal(); works, as there is no element with an ID of folderDirectory. I'm not sure how you are getting the value of the class property this.folder_directory, either.

Also, there are naming convention issues in your code that are likely to cause issues for you down the road. Aurelia knows how to automatically convert between JavaScript naming conventions and HTML naming conventions, but you have to follow these conventions. Let's look at some of these things:

  • Don't randomly shorten words in variable names, it makes your code harder to read. So load_destiFolder needs to become load_destinationFolder and cooseDestiFldr needs to become chooseDestinationFolder.
  • JavaScript uses camelCasing for variable and function names, so load_destinationFolder becomes loadDestinationFolder.
  • JavaScript uses InitCaps casing for class names, so class folder_directory becomes class FolderDirectory
  • HTML does is case-insensitive, so the convention for custom elements is to use dash-casing (also known as kebab-casing). Aurelia uses this and converts between JavaScript and HTML naming conventions for you. This means that it will take FolderDirectory and convert it to folder-directory.

Beyond that, we're going to need more code before we can really help you. What you've posted so far is like a Soduko puzzle that is missing a few necessary clues :-)

Upvotes: 1

LStarky
LStarky

Reputation: 2777

Add the semi-colon after the function call in the attached() component lifecycle method of folder_directory.js.

If that's only a copy-paste error, please edit your post with the full contents of each file so we can help you find the problem.

Upvotes: 0

Related Questions