Knockout输入ReadOnly状态

时间:2015-05-05 03:28:27

标签: javascript jquery html knockout.js

我正在尝试在我的程序中添加一个简单的功能,我在找出如何做我想做的事情时遇到了一些麻烦。

这就是我得到的:

我的输入文本框,旁边有一个链接,用于禁用/启用该输入文本框上的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
非常感谢任何帮助,谢谢!

3 个答案:

答案 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替换。

http://jsfiddle.net/ajameson/eeTjS/87/

答案 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);
}