1

click:イベントから別の div にデータを渡す必要があります。シナリオは次のとおりです。

ページの片側にリンクがあります。

<a data-bind="text: Name, click: $root.editAction"></a>

ページの反対側には、隠し div があります。

<div data-bind="if: $root.editActionShow">
    <input type="text" data-bind="value: Name"/>
</div>

$dataイベントからパスできるようにする必要がありますclick:。その非表示の div を実行します。

おそらく私はこれを考えすぎているのかもしれませんが、viewModel多くの異なるものがActions奥深くに埋め込まれておりviewModel.DataGroups.DataGroup.ActionDataGroup、アクション情報を編集するための HTML フォームは 1 つしかないため、編集したい特定のアクションのみをフォームに表示する方法がわかりません。 .

ここに別のキッカーがあります。オブザーバブルを my に追加しないことを好みviewModelます。その理由は.toJS()、最後にマッピングしてから、JSON を XML に変換する必要があるためです。これは、かなり厳密なスキーマに対して検証する必要があるため、余分な要素を持つことは悪いことです。変換前に手動で削除しない限り、検証に合格しません。ただし、変換中にオブジェクトを削除するため、this.blah = function() {}オブジェクトを に追加できます。viewModel.toJS()

アップデート：

これらすべての解決策は、間違いなく陽気です

viewModel.editAction = function(data) {
    viewModel.editActionFormShow(true);
    ko.applyBindings(data, $('#myHiddenDiv')[0]);
};
4

1 に答える 1

1

私が理解していることから、「クリックして編集」機能のようなものが必要ですが、これは 2 つのカスタム バインディングでかなりうまく解決できます。

このアプローチの大きな利点は、viewModel を余分なオブザーバブルで汚染しないことです。

バインディング:

ko.bindingHandlers.hidden = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.bindingHandlers.visible.update(element, function() {
                return!value; });
        }
    };

ko.bindingHandlers.clickToEdit = {
    init: function(element, valueAccessor,allBindingsAccessor){
        var value = valueAccessor(),
            input = document.createElement('input'),
                        link = document.createElement('a');

        element.appendChild(input);
                    element.appendChild(link);

                    value.isEditing = ko.observable(false);

                    ko.applyBindingsToNode(link,{
                        text: value,
                        hidden: value.isEditing,
                        click: function(){
                            value.isEditing(true);
                        }
                    });

        ko.applyBindingsToNode(input,{
            value: value,
            visible: value.isEditing,
                            hasfocus: value.isEditing
        });
    }
};

ビューモデル

var vm = {
    name: ko.observable()
}

HTML

<div data-bind="clickToEdit: name"></div>

作業フィドル: http://jsfiddle.net/8Qamd/

すべての功績は Ryan Niemeyer にあります。

于 2012-10-19T09:59:59.450 に答える