jcbridwe jcbridwe - 24 days ago 7
Javascript Question

Using a method inside a key value pair to truncate a string

I am using the Lodash and jQuery library inside my javascript and I am trying to figure out how to call a method that will allow me to truncate the results of a key value pair used to create a list inside my .html code. The html looks as follows:

<div class="slide-in-panel">
<ul class="list-unstyled slide-in-menu-navigation" data-bind="foreach: __plugins">
<li class="btn-block">
<div class="btn btn-default btn-block" data-bind="click: $parent.showPlugin, tooltip: 'Shoebox.Panel'">
<span data-bind="text: config.title"></span>
<em class="webgis-Icon webgis-Cross slide-in-menu-remove-shoebox-button"
data-bind="click: $parent.showRemoveConfirmBox, tooltip: 'Shoebox.RemoveShoebox'">
</em>
</div>
</li>
</ul>
</div>


The key component is the
data-bind="text: config.title"
part. This populates the list with name for that button. The
config.title
is created in the javascript file below. My goal is to apply a method such as
.truncate()
to the
config.title
part in the javascript to keep whatever name is being populated, from being to long. How would I do this?

return this.__backendShoeboxClient.createShoebox(this.__shoeboxName()).then((function(_this) {
return function(shoebox) {
return $when.join(shoebox.getName(), shoebox.getId(), shoebox.getUserName()).then(function(arg) {
var shoeboxId, shoeboxName, userName;
shoeboxName = arg[0], shoeboxId = arg[1], userName = arg[2];
return _this.__shoeboxContentFactory.create({
shoeboxId: shoeboxId,
shoeboxName: shoeboxName,
userName: userName
}).then(function(arg1) {
var activeShoeboxHandle, config, shoeboxContent;
shoeboxContent = arg1.shoeboxContent, activeShoeboxHandle = arg1.activeShoeboxHandle;
_this.__activeShoeboxHandleMain.loadModel(activeShoeboxHandle);
config = {
plugin: shoeboxContent,
title: shoeboxName,
userName: userName,
id: shoeboxId,
handle: activeShoeboxHandle,
icon: ""
};
_this.add(config, null, null);
activeShoeboxHandle.loadModel(shoebox);
_this.__shoeboxName.useDefaultValue();
return _this.__shoeboxName.clearError();
});
})["catch"](function(error) {
__logger__.error("Error while calling request " + error);
return $when.reject(new Error("Error while calling request. " + error));
});
};
})(this));
};


I am also trying to use the knockout
style
binding like this, but without any success:

<span data-bind="style: { textOverflow: ellipsis }, text: config.title"></span>

Answer

So, for edification's sake, I was able to find a solution to this problem using the substring method inside a simple if statement. The issue seemed to be that I was putting this in the wrong part of my code so I want to clarify what worked for me for future readers. I was able to apply the following inside the key: value pair and it totally worked:

config =
    plugin: shoeboxContent
    title: if name.length > 24
        "#{name.substring 0, 24}..."
    else
        name

    userName: shoebox.getUserName()
    id: shoebox.getId()
    handle: activeShoeboxHandle
    icon: ""

@add config, null, null