Adam Things

How to find an element in an observable array in KnockoutJS

Coding, JavaScript, ,

How to find an element in an observable array in KnockoutJS is not that hard of a task.  This is assuming that the two items you are comparing are a reference to the same item.  This is more of a custom comparison function to compare a value in an array to some other value.  To complete this we will use the ko.utils.arrayFirst from KnockoutJs.

Take a look at the following Javascript:

var match = ko.utils.arrayFirst(myObservableArray(), function(item) {
    return someValue.name === item.name;
});

Essentially what is happening here is that knockout is combing through the myObservableArray and looking for a match on name. If it finds a match then it returns that object as match. (Just wait, it’ll make sense). If it doesn’t find anything, then match is returned as undefined.

Here is the second part that deals with the match logic:

if (!match) {
  myObservableArray.push(someValue);
}

If match has a value to it and you apply the ! operator the outcome is false.

If match is undefined and you apply the ! operator the outcome is true.

So overall all, if our someValue does not exist in our myObservableArray, then we add it.


Error Messaging Using KnockoutJS Observable Applying CSS

Coding, JavaScript, ,

When doing error messages in an application I like to use KnockoutJS Observable to apply a css class to an input box to color it red meaning it’s required. The concept is quite simple really. You have an observable for the field.

self.FirstNameValidation = ko.observable('');

The point is when your validation fails, you add a message to the observable.

if(self.FirstName() == ''){
      self.FirstNameValidation('First Name Is Required');
}

So now that we have our observable set with an error message we can add a data-bind event to the input box to apply a css class to it.

<input id="firstName" data-bind="value: FirstName, css: { 'validationerror': FirstNameValidation() }">

Looking at the example above, the css class ‘validationerror’ will be added to the input box if there is a value in FirstNameValidation(). Simple way to add a visual cue to an input element that something is missing.

Change Notepad++ Default Save and Open Directory

Coding, General

I was getting frustrated with Notepad++ as every I would go to File and Open it would open some random localization type directory and I would have to navigate out to my documents or desktop. I found it’s a very obvious setting to adjust I just had never taken the time to look for it.

  1. Click Settings – top menu
  2. Select Preferences…
  3. Select Tab – New Document/Default Directory
  4. Go to top right section – Default Directory (Open/Save)
  5. Select on of the options that suits you best – I chose to designate a path to C:\Users\Desktop

Definitely simple and frustrated I didn’t look for it sooner.  Here is a screen of the preferences box in Notepad++

Changing Notepad Default Directory

Changing Notepad Default Directory

This simple run in today just reminds me that almost all programs have a setting for what is annoying you, so you don’t have to put up with most nuances. Take a moment and fix what is bugging you.


Double Exclamation Mark JavaScript Notation

Coding, JavaScript, ,

I find this to be a terribly obscure way to do a type conversion. The double exclamation mark in JavaScript basically means convert to Boolean, invert, then invert again. I documented this on my blog for quick reference as I keep running into it.

So you’re converting a value to a boolean, then inverting it, then inverting it again. Take a look at the three examples below that mean the same thing starting with the double exclamation mark.

// Really Confusing:
site.enable = !!webId;

// Less Confusing:
site.enable = (webId != 0) ? true : false;

// Easiest to understand in my opinion:
site.enable = (webId != 0);


Transitioning TFS into GitHub Git Repository

Coding, Git, , ,

Here are transition steps for a solution from TFS over to GitHub using Git Extensions. We will establish a repository on GitHub and create a feature branch.

Step 1. Establish repo in Github

  • On the homepage of your GitHub account, there is a green but that says ‘New Repository’; Click it.
    • Change the Owner to Your Account
    • Enter your Repository Name.
    • Select Private/Public (Your Preference)
    • Add .gitignore for CSharp (Pick applicable language.  This keeps git from version-ing unnecessary files)

Step 2. Establish master code branch (contains current production code)

  • Create a Directory at C:\Git
  • Right-Click on C:\Git and GitEx Clone
    • Repository to Clone: https://github.com/YourAccount/RepositoryName.git  (GitHub given location)
    • Destination C:\Git
    • Everything else blank.
    • (May be prompted for credentials: These are the credentials you log in to github.com with)
  • Copy Source code from your TFS location or wherever into C:\Git
    • May take awhile depending how big code solution is
  • Right-Click on  C:\Git
    • GitEx Commit
    • Stage All (May take awhile)
    • Add a comment then ‘Commit & push’
    • Will do intial commit, (click ok) then bring up push dialog, and wait again… for a while…then Ok.

    Now you should be able to look on the GitHub site and see all the files you just pushed.

Step 3. Establish Feature Crew branches

  • Create branch locally (Don’t need to check it out)
    • Right-Click on your local Repository (ex c:\Git)
      • Git Extensions
      • Enter Branch Name (ex: FeatureCrewBranch)
      • Deselect Checkout after create
      • Create Branch
  • Push FeatureCrewBranch to remote (Branch to push FeatureCrewBranch to FeatureCrewBranch)
    • Right-Click on your local Repository (ex c:\Git)
      • Git Extensions
      • Push
      • Remote origin (Master)
      • Branch to push FeatureCrewBranch to FeatureCrewBranch
      • Add tracking reference

4. Probably will want to compress Git database

  • Right Click on your local repository (ex. C:\Git)
    • Select Git GUI
  • Select compress the db now (Popped up a window for me..will take a bit)
    • If no pop up shows
      • Click Repository in top left
      • Compress Database

It’s not the hardest process, but it is kind of confusing. Please let me know if you have any ideas or clarifications that we can make.

Friends

Alpha 46 Studios - Custom Web Design
Developer Memes : Hilarious!
Mr. D's Carpet Cleaning In Arizona
Alienware Fx Themes

StackOverflow Profile

profile for Adam at Stack Overflow, Q&A for professional and enthusiast programmers