0

我有一个视图模型，它具有绑定到 html 输入的可观察“yearsOld”。

<input type="text" data-bind="value:yearsOld">

    var viewModel = {
      yearsOld: ko.observable("");
    }

有没有办法将 css 类添加到 viewModel 的输入中？我问的原因是因为我需要在绑定到 yearsOld 的输入中添加一个名为“正整数”的 css 类，以便我的第 3 方 jQuery 库将限制该绑定输入字段上的非数字输入。

注意：我知道淘汰赛提供的用于放置在输入字段上的css 绑定，但这对我没有帮助，因为 css 不一定是动态的。我只是希望能够在 viewModel 的输入上放置一个 css 类，而不是直接将它放在每个单独的输入上。即使这对你没有意义，我只是好奇它是否可能。

4

3 回答 3

2

这当然是可能的，您可以通过 css 绑定来实现。我不明白为什么您认为 css 绑定对您不起作用。

这是我的做法：

<input data-bind="value: yearsOld, css: { 'positive-integer': positiveIntegersOnly }" />

var viewModel = {
   yearsOld: ko.observable(),
   positiveIntegersOnly: ko.observable(false)
}

要应用“正整数”类：

viewModel.positiveIntegersOnly(true);
于 2012-12-21T22:48:02.877 回答
1

起初我的回答是否定的，这是不可能的。但经过一番研究，我发现这是完全可能的。

在这里使用这个问题的精彩答案：knockoutjs overriding bindinghandlers您可以覆盖值绑定的行为，并添加所需的必要行为。

var originalInit = ko.bindingHandlers.value.init,
    originalUpdate = ko.bindingHandlers.value.update;

ko.bindingHandlers.value= {
    init: originalInit,
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var $element = $(element);
        var value = ko.utils.unwrapObservable(valueAccessor());
        // only apply to inputs, and if value is a number and is greater than 0
        if ($element.prop("tagName").toLowerCase() == "input" && !isNaN(value) && value > 0) {
            $element.addClass('positive-integer');
        }
        else {
            // otherwise ensure the class is removed
            $element.removeClass('positive-integer');
        }
        // call the original update function
        originalUpdate(element, valueAccessor, allBindingsAccessor, viewModel);
    }
};

此代码将在常规value:绑定代码之前运行，并更新您的元素类（需要 jQuery，但这只是因为我很懒 - 如果需要，应该很容易转换）。

完整的 JS 小提琴可在此处获得：http: //jsfiddle.net/sp3uF/

于 2012-12-22T05:41:29.037 回答
0

您想要下一个场景：用户输入一些非数字并且您的输入改变了样式？

两种方式：jQuery和css绑定：

//jQuery
var viewModel = {
    hasNonNumeric: function(){//not implemented},
    yearsOld: ko.observable(),
    yearsOld.subscribe(function(newValue) {
        if (this.hasNonNumeric(newValue)) {
            $('input').addClass("positive-integer");
        }
        else {
            $('input').removeClass("positive-integer");
        }
    });
}​

//knockout
var viewModel = {
        hasNonNumeric: function() { //not implemented},
        yearsOld: ko.observable(),
        scareUser: ko.computed(function() {
            var result = false;
            if (this.hasNonNumeric(this.yearsOld())) {
                result = true;
            }            
            return result;
        });
    }​

<input data-bind="value: yearsOld, css: { 'positive-integer': scareUser}" />
于 2012-12-22T20:20:14.637 回答