2

KnockoutJSを既存のアプリケーションに徐々に振りかけようとしています。これに対する私の最初の刺し傷は、いくつかの小さな既存のフォームを取得し、それらの値をぼかし時にサーバーにプッシュすることと、バインディングを介していくつかの要素を更新することです。

私が直面している問題は、フォームが最初に表示されたときに、ノックアウトを介して入力されていないことです。すでにフォームにあるデータを使用してページをレンダリングしています。だから私はこのようにノックアウトを設定します：

function DomainViewModel() {
  this.name = "";
  this.description = "";
}

ko.applyBindings(new DomainViewModel());

そして、私はそのような私の形を持っています：

<input data-bind="value: name" value="${domainInstance.name.encodeAsHTML()}"/>
<textarea data-bind="value: description" >${domainInstance.description.encodeAsHTML()}</textarea>

つまり、フォームが表示され、ノックアウトによってViewModelの値がフォームに適用され、サーバーによってそこに配置された値が消去されます。私はこれがなぜ起こるのか、そしてこれはバグではないことを理解しています。ただし、ここに別のオプションがあるかどうか疑問に思います。

私は次のようなことができることを知っています：

function DomainViewModel() {
  this.name = "${domainInstance.name}";
  this.description = "${domainInstance.name}";
}

ただし、外部スクリプトファイルではなく、JavaScriptの一部をGSPに直接配置する必要があります（Grailsを使用しています）。

4

1 に答える 1

5

したがって、これを行うにはいくつかの方法があります。まず、これは絶対にしないでください

function DomainViewModel() {
  this.name = "${domainInstance.name}";
  this.description = "${domainInstance.name}";
}

ビューモデルが再利用できなくなりました。grailsを使用してビューモデルにデータを入力する場合は、ページにjavascriptオブジェクトを設定し、次のように外部のjavascriptファイルのviewmodel定義に渡します（プロパティを表示可能にすることを忘れないでください）。

var grailsData = {
    name : "${domainInstance.name}",
    description : "${domainInstance.name}"
};

  ...
function DomainViewModel(data) {
  this.name = ko.observable(data.name);
  this.description = ko.observable(data.description);
}

ko.applyBindings(new DomainViewModel(grailsData);

後でデータのソースを変更するときにHTMLを変更する必要がないため、このアプローチをお勧めします。ただし、別のオプションがあります。要素から値を収集するバインディングを作成し、それを使用して初期の監視可能な値を設定できます。そのバインディングは次のようになります。

ko.bindingHandlers.valueWithInit= {
    init: function(element, valueAccessor) {
        valueAccessor()(element.value);
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        element.value = ko.utils.unwrapObservable(value);
    }
};

これが、この方法の実際の動作を示すフィドルです。

于 2012-11-01T17:17:17.760 に答える