Adding custom helper functions or ember-truth-helpers to my Ember application

Question

I have an Ember Application, maybe it started as Visual Studio some MVC or some project template and later they have added, now I am trying hard to add "ember-truth-helpers" in many ways like using yarn add or npm add, in any of the ways its not being added, all I am trying to do is to execute the below code:

{{#if (eq "complete" "complete")}}  {{! works! }}
{{log 'Complete 1'}}
{{/if}}

I am getting the following error: ember.debug.js:43618 Uncaught (in promise) Error: Compile Error: eq is not a helper

And my package.json file looks as below

{ 
   "name":"ims-ember",
   "version":"1.0.0",
   "main":"index.js",
   "scripts":{ 
      "build":"ember build",
      "babel-preset-env":"^1.7.0",
      "lint:hbs":"ember-template-lint .",
      "babel-preset-es2016":"^6.24.1",
      "lint:js":"eslint .",
      "bootbox.js":"^4.3.0",
      "start":"JOBS=1 ember serve",
      "bootstrap":"^3.3.7",
      "test":"ember test"
   },
   "author":"",
   "license":"ISC",
   "description":"",
   "dependencies":{ 
      "babel-core":"^6.26.3",
      "babel-polyfill":"^6.26.0",
      "babel-preset-env":"^1.7.0",
      "babel-preset-es2016":"^6.24.1",
      "bootbox.js":"^4.3.0",
      "bootstrap":"^3.3.7",
      "bootstrap-datepicker":"^1.9.0",
      "bootstrap-hover-dropdown":"^2.2.1",
      "chosen-js":"^1.8.7",
      "datatables":"^1.10.18",
      "ember-cli-windows":"github:felixrieseberg/ember-cli-windows",
      "file-loader":"^4.2.0",
      "font-awesome":"^4.7.0",
      "gulp":"^4.0.2",
      "gulp-babel":"^8.0.0",
      "gulp-clean":"^0.4.0",
      "gulp-clean-css":"^4.2.0",
      "gulp-concat":"^2.6.1",
      "gulp-concat-sourcemap":"^1.3.1",
      "gulp-declare":"^0.3.0",
      "gulp-filter":"^6.0.0",
      "gulp-if":"^3.0.0",
      "gulp-insert":"^0.5.0",
      "gulp-less":"^4.0.1",
      "gulp-replace":"^1.0.0",
      "gulp-uglify":"^3.0.2",
      "gulp-wrap":"^0.15.0",
      "gulp-wrap-file":"^0.1.2",
      "handlebars":"^4.4.2",
      "icons-loader":"0.0.6",
      "inputmask":"^4.0.9",
      "jquery":"^3.4.1",
      "jquery-ui":"^1.12.1",
      "json-stringify-safe":"^5.0.1",
      "lightbox2":"^2.11.1",
      "loader-utils":"^1.2.3",
      "moment":"^2.24.0",
      "mssql":"^5.1.0",
      "node-sass":"^4.12.0",
      "npm":"^6.13.0",
      "popper.js":"^1.15.0",
      "rimraf":"^3.0.0",
      "sass-loader":"^8.0.0",
      "schema-utils":"^2.4.1",
      "toastr":"^2.1.4",
      "typeahead.js":"^0.11.1",
      "uglifyjs-webpack-plugin":"^2.2.0",
      "uuid":"^3.3.3"
   },
   "devDependencies":{ 
      "@babel/core":"^7.6.2",
      "@babel/preset-env":"^7.6.2",
      "babel-loader":"^8.0.6",
      "css-loader":"^3.2.0",
      "ember-truth-helpers":"^2.1.0",
      "install":"^0.13.0",
      "less-loader":"^5.0.0",
      "style-loader":"^1.0.0",
      "webpack":"^4.41.0",
      "webpack-cli":"^3.3.10"
   }
}

any help please?

Where is Ember in your dependencies? E.g., "ember-source": "~2.18.0" or something like that — stevenelberger
No its not there I am not sure why, but when we run ./watch all the ember files would be converted to javascript functions, minified and posted in an another Web application that runs - it all runs properly except custom helper methods - any help please? — Abdul
Is there an index.html file somewhere? Maybe ember is included in a script tag there? — jrjohnson

Abdul Abdul · Accepted Answer · 2019-11-15T16:17:47

I have fixed this issue with helper functions - Here it is, the previous developer put all the helper functions in one file, the confusion he created was, he put other files with those helper functions in different directories - it seems I need to clean that up. And your suggestion to check the define helped me to look into the webpack.config.js (async helpers, async __parts), there he is combining all the files scripts and generating as one js file which is written on to app.js. The convention he (or Ember I am not sure) followed was camel casing. For example for one helper-function he written as below withing the same ifCond.js file, is converted as "replace", we can use it as replace in handlebar

IMS.ReplaceHelper = Ember.Helper.extend({
    compute(args) {
        return args[0].replace(new RegExp(args[1], 'ig'), args[2]);
    }
})

If suppose, if there are two Words - then it follows the camel casing (you know it). Totally completed and I have written some helper functions of my own as needed - thanks a lot for everybody who jumped-in to help me - thanks a lot and I don't have words how to describe how happy I am - thank you. My own helper functions as below:

    IMS.IsLastHelper = Ember.Helper.extend({
        compute(args) {
            var list = args[0];
            var item = args[1];

        if (Array.isArray(list)) {
            var id = list.indexOf(item);
            return id == list.length - 1;
        }
        return false;
    }
})
IMS.IsFirstHelper = Ember.Helper.extend({
    compute(args) {
        var list = args[0];
        var item = args[1];

        if (Array.isArray(list)) {
            var id = list.indexOf(item);
            return id == 0;
        }
        return false;
    }
})

And I called them with syntax as below:

                        {{#each  model.novs as |nov index|}}
                        {{#if (isFirst model.novs nov)}}
                        ({{nov.NOVNumber}}:
                        {{else}}
                        {{nov.NOVNumber}}:
                        {{/if}}
                        {{#each  nov.Violations as |novv index|}}
                        {{#unless (isLast nov.Violations novv)}}
                        {{novv.ViolationNumber}},
                        {{else}}
                        {{#if (isLast model.novs nov)}}
                        {{novv.ViolationNumber}}
                        {{else}}
                        {{novv.ViolationNumber}};
                        {{/if}}
                        {{/unless}}
                        {{/each}}
                        {{#if (isLast model.novs nov)}}
                        )
                        {{/if}}
                        {{/each}}

Thanks again to everybody in this group. :pray:

Adding custom helper functions or ember-truth-helpers to my Ember application

2 Answers