소켓 위치 바인딩 및 소켓 위치에 문자열 삽입

TinyMCE처럼 강력한 WYSIWYG 편집기가 아니더라도 커서 위치에 문자열을 삽입하고 싶은 기능이 있습니까
그럼 이번에 소개해드리는 건 "Caret binding"입니다.

caret binding

DEMO:JSFIDDLE
caret-binding

ko.bindingHandlers.caret = {
    init: function(element, valueAccessor, allBindings) {
        var $elm = $(element),
            suspend = true,
            value_writer = allBindings()._ko_property_writers.value;

        function updateModel() {
            var pos = $elm.caret();
            var modelValue = valueAccessor();
            suspend = true;
            if (ko.isObservable(modelValue)) modelValue(pos);
            else valueAccessor(pos);
        }

        $elm.bind('keydown click focus', updateModel);

        ko.computed(function() {
            var modelValue = ko.unwrap(valueAccessor());
            if (suspend) {
                suspend = false;
                if (typeof modelValue == 'number') return;
            }
            var st = element.scrollTop;
            $elm.caret(modelValue);
            element.scrollTop = st;
            if (typeof modelValue == 'string') {
                updateModel();
                if (value_writer) {
                    value_writer($elm.val());
                }
            }
        });
    }
};

의존성: jQuery, jquery.caret

사용 방법

바인딩 <input type="text"> 또는 <textarea> 을 사용합니다.

<textarea data-bind="value: body, caret: bodyCaret"></textarea>

function ViewModel() {
    var self = this;
    self.body = ko.observable("");
    self.bodyCaret = ko.observable();

    self.insertFoo = function() {
        self.bodyCaret('Foo');
    };
}

바인딩bodyCaret은 항상 문자의 삽입 위치를 저장하지만 ViewModel 측면에서 문자열을 작성하여 삽입 위치에 삽입할 수 있습니다.
또 그대로 두면 왜 굴러가는 위치가 끝까지 날아갈지 몰라 수정하기도 했다.

사과하다

다른 제목을 생각했는데 어떻게 생각을 통일하지 못하고 포기하고 상당히 작은 기사로 바뀌었다.
미안합니다.
하지만 개인적으로'이런 사용자 정의 귀속을 썼어요!'이런 최소한의 보도가 늘어나기를 바란다.반복할 수 있는 견해를 공유합시다!