[英]Hide button everywhere besides specific URL in knockout
我有以下按钮:
<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>
我只想在这个特定的 url http://localhost:5595/#scorecard/ec5aa8ed-2798-4e71-b13d-f3e525994538/dashboard/PrefDashBoard
请记住ec5aa8ed-2798-4e71-b13d-f3e525994538
是一个 id,它总是在变化,但我希望它与所有 id 一起显示,例如按钮也应该在这里显示http://localhost:5595/#scorecard/2356789-234-234d-g3g3-reg456452/dashboard/PrefDashBoard
我想把它隐藏在不是 url 的地方。 我尝试了以下代码,但它似乎不起作用:
<script>
$(document).ready(function(){
if(window.location.pathname.match(/\/dashboard/PrefDashBoard))
{
$(".DashboardEdit").show();
}
else
{
$(".DashboardEdit").hide();
}
});
</script>
这是该按钮的JS:
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;
}
});
我认为您可以利用visible
绑定根据您的标准显示/隐藏按钮
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>
如果您安装并配置了 Durandal 的路由器插件,您还可以使用可观察的 activeInstruction() 来获取有关当前路由的信息。 然后,您可以在计算中使用它来检查当前片段是否与您的页面路由匹配。 更多信息: http://durandaljs.com/documentation/api#class/Router/property/activeInstruction
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.