在扩展器中初始化/附加到 Observable 的 Observables 在页面加载时未初始化答案

【问题标题】：Observables initialized/attached to Observable in extender not initialized at page load在扩展器中初始化/附加到 Observable 的 Observables 在页面加载时未初始化
【发布时间】：2013-11-05 02:40:06
【问题描述】：

我我创建了一个文本计数器来告诉用户他们已经输入了多少字符以及还有多少可用。这应该显示文本区域何时具有焦点并消失，然后文本区域失去焦点。

我创建了一个绑定处理程序，它使用扩展器来扩展传递给它的可观察对象。问题是它只有在输入文本、导航离开文本区域，然后导航回文本区域后才能工作。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head> 
<body>
    <div class="question" >
        <label for="successes" data-textkey="successes">This is a question</label>
        <textarea data-bind="textCounter: successes, hasFocus: successes.hasFocus, maxLength:200, event: { keyup:successes.updateRemaining }"></textarea>
        <div class="lengthmessage edit" data-bind="visible:successes.hasFocus()">
            <div >
                <em>Length:</em> <span data-bind="text:successes.currentLength"></span>
                <em>Remaining:</em> <span data-bind="text:successes.remainingLength"></span>
            </div>    
        </div>                                      
    </div>

<script src="../Scripts/knockout-2.3.0.debug.js" type="text/javascript"></script>
<script type="text/javascript">
    (function (ko) {

        ko.extenders.textCounter = function (target, options) {
            options = options || {};
            options.maxLength = options.maxLength ? parseInt(options.maxLength) : 2000;
            target.maxLength = ko.observable(options.maxLength);
            target.currentLength = ko.observable(target().length);
            target.remainingLength = ko.observable(target.maxLength() - target.currentLength());
            target.hasFocus = ko.observable(false);

            target.hasFocus.subscribe(function () {
                target.currentLength(target().length);
                target.remainingLength(target.maxLength() - target.currentLength());
            });

            target.updateRemaining = function (data, event) {
                if (event.target == undefined && event.srcElement.value == "") {
                    target.currentLength(0);
                }
                else {
                    var e = $(event.target || event.srcElement);

                    target.currentLength(e.val().length);
                    if (target.currentLength() > target.maxLength()) {
                        e.val(e.val().substr(0, target.maxLength()));
                        target.currentLength(target.maxLength());
                    }
                }
                target.remainingLength(target.maxLength() - target.currentLength());
            };

            return target;
        };

        ko.bindingHandlers.textCounter = {
            init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                var val = ko.utils.unwrapObservable(valueAccessor());
                var observable = valueAccessor();
                observable.extend({ textCounter: allBindingsAccessor() });
                ko.applyBindingsToNode(element, {
                    value: valueAccessor()
                });
            },
            update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                var val = ko.utils.unwrapObservable(valueAccessor());
                var observable = valueAccessor();
                ko.bindingHandlers.css.update(element, function () { return { hasFocus: observable.hasFocus }; });
            }
        };

        var viewModel = function () {
            this.successes = ko.observable("");
            //this.successes.hasFocus = ko.observable(); 
        }
        ko.applyBindings(new viewModel());

    } (ko));
</script>
</body>
</html>

如果我取消注释：

  //this.successes.hasFocus = ko.observable();

页面从一开始就会按照我想要的方式运行，但它违背了使用扩展器的全部目的，因为我的视图模型现在有一个来自扩展器的对象。

我必须相信我在这里缺少一些相对简单的东西。

感谢您的帮助..

【问题讨论】：

标签： data-binding knockout.js extender bindinghandlers

【解决方案1】：

问题是这里解析绑定字符串的时候还没有定义hasFocus：

<textarea data-bind="textCounter: successes, hasFocus: successes.hasFocus, maxLength:200, event: { keyup:successes.updateRemaining }"></textarea>

所以，解析绑定字符串时successes.hasFocus是未定义的。

一种选择是在您的hasFocus 属性可用后，在您的textCounter 绑定中应用hasFocus 绑定。

此外，在 Knockout 3.0（今天发布）中，绑定字符串的解析发生在绑定本身中访问值时。因此，您的代码实际上已经在 KO 3.0 中有效。

【讨论】：

我继续升级到 KO 3.0