web-dev-qa-db-ja.com

ノックアウトを使用して「プレースホルダー」属性を更新する

私はノックアウト.js（バージョン2.1.0）を使用していくつかのデータを取得するいくつかのフィールドを持つフォームを持っています。たとえば、入力の「値」フィールドを更新するには、次のように入力します。

<input type="text"  name="contrasena" id="login-user" value="" placeholder="" data-bind="value: user">

「pass」キーワードに使用する値aを格納するJSONがありますが、正しく動作します。

同じ方法を使用して「プレースホルダー」属性を設定しようとしましたが、機能しません。

<input type="text"  name="contrasena" id="login-user" placeholder="" data-bind="placeholder: user">

「ko.bindingHandlers ['value']」に基づいて「ko.bindingHandlers ['placeholder']」関数を追加するknockout.jsファイルを変更しようとしました（「ko.jsonExpressionRewriting.writeValueToProperty」の「value」ではなく「placeholder」を変更します）関数）、しかしそれは正しく機能しません、それは「プレースホルダー」の代わりに「値」属性に情報を置きます。

誰でもこれを解決する方法を知っていますか？

どうもありがとうございました！

knockout.jsplaceholder
24
user1702964

data-bind="placeholder: user"を使用する場合は、jsコードに custom-binding を作成できます。

あなたはko.bindingHandlers['placeholder']を使用して正しい道を進んでいましたが、knockout.jsファイルを編集する必要はありません-実際、それは悪い習慣です。

これには、非常に基本的なカスタムバインディングが必要です。

ko.bindingHandlers.placeholder = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var underlyingObservable = valueAccessor();
        ko.applyBindingsToNode(element, { attr: { placeholder: underlyingObservable } } );
    }
};

カスタムバインディングのガイドについては、 here を参照してください

Knockout自体は本質的に目障りですが、これはわずかに少なくなります。プレースホルダーが要素にどのように適用されるかについての知識をビューから削除します。

実際、将来、placeholder属性をサポートしていないブラウザでプレースホルダを表示するために、ある種のjQueryプラグインを適用したい場合、これは、（init:）を初期化する場所になります。プラグイン-その場合、update:関数も必要になります。

36
Sethi

次のように、既存のattrバインディングを使用する必要があります。

<input data-bind="attr: {placeholder: ph}" />

var Model = function () {
    this.ph = ko.observable("Text..."); 
}
ko.applyBindings(new Model());
100
gbs