2

マークダウン文字列に支えられてレンダリングされるノックアウト バインディング ハンドラーに取り組んでいます (markdown.js と組み込みの 'html' バインディング ハンドラーを使用)。

正常に動作しますが、contenteditable 動作を追加しようとしましたが、observable 値がぼかしで更新されない、またはすべてのマークダウン形式が削除されたテキストのみで observable が更新されるという問題が発生しました。

考えられるアイデアや代替アプローチはありますか?

ここで完全なフィドル：http://jsfiddle.net/ZdxAS/3/

バインディング ハンドラ:

ko.bindingHandlers["editable"] = {
    init: function (element, valueAccessor) {
        $(element).on('blur', function (event) {
            var observable = valueAccessor();
            observable($(this).text());
            return true;
        });
        $(element).on('focus', function (event) {
            var observable = ko.utils.unwrapObservable(valueAccessor());
            $(this).text(observable);
            return true;
        });
        return $(element).on('keydown', function (event) {
            var esc, observable, submit;
            esc = event.which === 27;
            element = event.target;
            if (esc) {
                document.execCommand("undo");
                element.blur();
                return true;
            } else {
                return true;
            }
        });
    },

    update: function (element, valueAccessor, allBindings, viewModel, context) {
        var accessor = function () {
            var text = ko.utils.unwrapObservable(valueAccessor());
            return markdown.toHTML(text);
        }
        return ko.bindingHandlers.html.update(element, accessor, allBindings, viewModel, context)
    }
};
4

1 に答える 1

3

それはかなり奇妙です。Chrome でテストを実行したところ、次のような結果が得られました。

pre タグで contenteditable=true 属性を使用すると、pre 要素をクリックしたときにコンテンツ エディターが正しく表示されます。ただし、コンテンツを編集して Enter キーを数回押すと、改行文字ではなく<br />andなどの html タグが挿入されます。<div><br/></div>その後、pre 要素をクリックして編集を停止すると、実際の改行ではなく生の HTML が表示されます。

そして、jQuery text() ドキュメントから(blur イベント ハンドラーで使用):

ブラウザーごとに HTML パーサーが異なるため、返されるテキストの改行やその他の空白が異なる場合があります。

私はマークダウンの専門家ではありませんが、マークダウンは空白に依存しているように見えます。行頭に「#」があると大きなヘッダーが表示されますが、「#」の前の改行がない場合、マークダウンは大きなヘッダーを提供しません。そのため、text() 呼び出しが contenteditable pre の結果と相互作用することによって引き起こされる可能性があるように、空白が台無しになると、マークダウンが台無しになります。

代わりに何ができますか？ノックアウトでクリック編集を設定します。これがどのように機能するかは、http://adventuresindotnet.blogspot.com/2012/04/knockout-and-click-to-edit.htmlおよびhttp://knockoutjs.com/documentation/hasfocus-binding.htmlで確認できます。

http://jsfiddle.net/tlarson/w93BR/のフィドルの例

基本的な考え方は、読み取り専用要素と編集可能な要素を持ち、編集モードかどうかに応じて、一度に 1 つのみが表示されるようにすることです。

<pre data-bind="text: text, visible: !editingText(), click: textClick"></pre>        
<textarea data-bind="value: text, valueUpdate: 'afterkeyup', 
          visible: editingText, hasfocus: editingText" type='text'"></textarea>
于 2013-04-27T18:43:22.780 に答える