2

現在、カスタム KnockoutJS バインディングを実装して、div を contenteditable にしようとしています。例として、knockoutJS の最初のチュートリアルから ViewModel を取得し、「編集モード」フラグを追加します。

JSBin: http://jsbin.com/ejugip/3/edit

ViewModel コード:

function HelloWorldViewModel() {
    var self = this;
    self.isInEditMode = ko.observable(true);
    self.firstName = ko.observable('Bert');
    self.lastName = ko.observable('Berntington');
    self.fullName = ko.computed(function () {
        return self.firstName() + ' ' + self.lastName();
    });
}

コードを表示:

<fieldset id="HelloWorldView">  
    <legend>Hello World</legend>
    <p><input type="checkbox" data-bind="checked: isInEditMode" /> edit mode</p>
    <label>First name:</label>
    <div data-bind="contenteditable: isInEditMode, text: firstName"></div>
    <label>Last name:</label>
    <div data-bind="contenteditable: isInEditMode, text: lastName"></div>
    <label>Full name:</label>
    <div data-bind="text: fullName"></div>
</fieldset>

これまでのところ、これは私のバインディング ハンドラー コードです。

function makeEditable(element, editable) {
    $(element).attr('contenteditable', (editable) ? true : false);
    $(element).removeClass('Editable');
    if (editable) {
        $(element).addClass('Editable');
    }
}

ko.bindingHandlers.contenteditable = {
    init: function (element, valueAccessor) {},
    update: function (element, valueAccessor) {
        var editable = ko.utils.unwrapObservable(valueAccessor());
        makeEditable(element, editable);
    }
};

今のところ、要素と css クラスに contenteditable 属性を追加しているだけです。

したがって、編集モードの開始と終了は正常に機能します。まだ欠けていることの 1 つは、contenteditable 要素が編集された後に viewModel が更新されることです。

ビューモデルを編集可能な要素と同期させる最良の方法は何ですか? 独自のカスタム "text:" バインディングが必要ですか、それとももっと簡単な方法がありますか?

4

1 に答える 1

5

少し前に、KOベースのコンテンツ編集可能なバインディングとエディターを作成しました。これからインスピレーションを得ることができます。

https://github.com/madcapnmckay/Knockout-UI/blob/master/js/ui-editor.js

お役に立てれば。

于 2012-04-24T19:18:40.157 に答える