我正在尝试在我的程序中添加一个简单的功能,我在找出如何做我想做的事情时遇到了一些麻烦。
这就是我得到的:
我的输入文本框,旁边有一个链接,用于禁用/启用该输入文本框上的readonly属性。
<div>
<input type="text" data-bind="attr: { 'readonly': getreadonlyState() }" value="420" />
<a href="javascript:void(0);" data-bind="click: readonly">Edit</a>
</div>
这是我的淘汰剧本:
var ViewModel = function() {
var self = this;
self.getreadonlyState = ko.observable('readonly');
self.readonly = function() {
if (self.getreadonlyState()) {
self.getreadonlyState(undefined);
}
else self.getreadonlyState('readonly');
}
}
ko.applyBindings(new ViewModel());
这很好用,但我想要的是当我点击编辑链接时,它会将链接的文本更改为:“停止编辑”,所以当我点击“停止编辑”时,再次启用只读属性。
这是我工作的fiddle。
非常感谢任何帮助,谢谢!
答案 0 :(得分:0)
我已更新您的小提琴并希望它符合您的需求:
<div>
<input type="text" data-bind="attr: { 'readonly': getreadonlyState() }" value="420" />
<a href="javascript:void(0);" data-bind="click: readonly"><span data-bind="text:linkText"></span></a>
</div>
var ViewModel = function() {
var self = this;
self.getreadonlyState = ko.observable('readonly');
self.readonly = function() {
if (self.getreadonlyState()) {
self.getreadonlyState(undefined);
}
else {
self.getreadonlyState('readonly');
}
}
self.linkText = ko.computed(function(){
return self.getreadonlyState() == 'readonly' ? "Stopping edit" : "Edit";
}, self);
}
ko.applyBindings(new ViewModel());
答案 1 :(得分:0)
这是@ thangcao答案的替代方案。我不是说这更好或更糟,只是使用 subscribe 处理程序而不是 computedObservable 的替代方案。
<div>
<input type="text" data-bind="attr: { 'readonly': getreadonlyState() }" value="420" />
<a href="javascript:void(0);" data-bind="click: readonly, html: linkText"></a>
</div>
var ViewModel = function() {
var self = this;
self.getreadonlyState = ko.observable('readonly');
self.getreadonlyState.subscribe(function(val) {
self.linkText(val === "readonly" ? "Edit" : "Stop editing");
});
self.readonly = function() {
if (self.getreadonlyState()) {
self.getreadonlyState(undefined);
}
else self.getreadonlyState('readonly');
}
self.linkText = ko.observable("Edit");
}
ko.applyBindings(new ViewModel());
请注意,@ thangcao的答案中不需要额外的<span>
。
另外,为什么“编辑”/“停止编辑”元素是锚标记?为什么不将它设为<span>
并且不再需要额外的内联JavaScript(无论如何都可以用return false;
函数中的readonly
替换。
答案 2 :(得分:0)
你可以使用这个binginHandlers:
ko.bindingHandlers.readOnly = {
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (value) {
element.setAttribute("disabled", true);
} else {
element.removeAttribute("disabled");
}
}
};
在我的HTML中:
<input type="text" id="create-finess" class="form-control" data-bind="readOnly: _locked" />
最后在我的JS中:
//Constructor of my view model
function ViewModel(resx) {
this._locked = ko.observable();
}
// on init of the page i lock the input
this._load = function () {
this._locked(true);
}