Hide button everywhere besides specific URL in knockout

Question

I have the following button:

<button class="btn actionButtonIcon" id="DashboardEdit" data-bind="click: changeButtonText">
    <figure>
        <img src="../../../Images/NotesPink.png" />
        <figcaption data-bind="text: $data.ProcurementbuttonText() ? 'Save': 'Edit'"></figcaption>
    </figure>
</button>

I want to only show it in this specific url http://localhost:5595/#scorecard/ec5aa8ed-2798-4e71-b13d-f3e525994538/dashboard/PrefDashBoard

Bearing in mind that ec5aa8ed-2798-4e71-b13d-f3e525994538 is an id, thats always changing but i want it to show with all ids as well for example the button should show here as well http://localhost:5595/#scorecard/2356789-234-234d-g3g3-reg456452/dashboard/PrefDashBoard and i want to hide it where this isnt the url. I tried the following code but it doesnt seem to work:

        <script>
     $(document).ready(function(){
    if(window.location.pathname.match(/\/dashboard/PrefDashBoard))
    {
    $(".DashboardEdit").show();
    }
    else
    {
    $(".DashboardEdit").hide();
    }
    });
    </script>

Here is the JS of that button:

            self.ProcurementbuttonText = ko.observable(false);

        self.changeButtonText = function(){
            self.ProcurementbuttonText(!self.ProcurementbuttonText())
            if (!self.ProcurementbuttonText()){
                var data = {
                    'ScorecardId':ko.observable(localStorage.getItem('scorecardId'))(),
                    'DashboardConfig':ko.observable(localStorage.getItem('ElementDataWidget'))()
                };
                PreferentialProcurementDashboardApi.Save(data);  
            }  
    }



        self.DashboardEdit = ko.computed({
            read: function () {
                var text = 'Customise your dashboard';

                if (!self.EnableScorecardFeatures()) {
                    text = 'This feature is currently unavailable for this scorecard type';
                } else {
                    if (!self.HasDocumentsRole()) {
                        text = 'You do not have sufficient rights to access the Supporting Documents view';
                    }
                }

                return text;
            }
        });

Answer 1

i think you can take advantage of the visible binding to show/hide the button based on your criteria

function PageViewModel() {
  var self = this;
  self.buttonVisible = ko.observable(true);
  self.changeButtonText = function() {
    self.ProcurementbuttonText(!self.ProcurementbuttonText());
  }
  self.ProcurementbuttonText = ko.observable(false);
  self.buttonText = ko.pureComputed(function() {
    return self.ProcurementbuttonText() ? "Save" : "Edit";
  });
  self.isButtonVisible = ko.computed(function() {
    //do some your logic here.  just need to return a true or false value;
    return self.buttonVisible();
  });

  self.labelText = ko.pureComputed(function() {
    var messageStart = "click to ";
    var state = self.buttonVisible() ? 'hide' : 'show';
    var messageEnd = " button";

    return messageStart + state + messageEnd;

  });
}

ko.applyBindings(new PageViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<button class="btn actionButtonIcon" id="DashboardEdit" data-bind="click: changeButtonText, visible: isButtonVisible, text: buttonText">
Click me.
</button>
<br/>
<br/>
<label><span data-bind="text: labelText " ></span>
  <input type="checkbox" data-bind="checked: buttonVisible" />
</label>

Answer 2

If you have Durandal's router plugin installed and configured, you can also use the activeInstruction() observable to get info about the current route. You can then use this in your computed to check if the current fragment matches your page route. More info here: http://durandaljs.com/documentation/api#class/Router/property/activeInstruction