2

Knockout.js を使用して、動的フォーム表示を接続しています。したがって、素敵な名前の付いたプロパティの代わりに、表示して接続する必要がある配列に任意の数の「フィールド」があります。近いと思いますが、カスタム バインディングの最後の仕上げに失敗しています。

データ

myDynamicFields = [
      {
        name: "email",
        value: "me@gmailllllll.com",
        type: "text",
        validation: {required: true},
        label: "Email Address",
      },
      {
        name: "username",
        value: "bobsmith",
        type: "text",
        validation: {required: true},
        label: "Username"
      }
  ];

ko.mapping を使用して、この配列をオブザーバブルのオブザーバブル配列にマップしています。したがって、配列全体が観測可能であるだけでなく、「名前」や「値」などの各フィールドも観測可能です。この配列は、任意の数の要素を持つことができ、「名前」をキーにしています。

カスタム バインディング カスタム バインディング
が必要な理由は (私が思うに)、ビューで何かが変更されたときに、配列のどのメンバーが変更されたかを関連付けることができるようにするためです。繰り返しますが、名前がキーになっているので、簡単に検索します。それを確認してください：

ko.bindingHandlers.specialValue = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        model = _.find(viewModel, function (guy){
            return guy.name()==valueAccessor();
        });
        ko.bindingHandlers.value.init(element, model.value, allBindings, viewModel, bindingContext);
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        model = _.find(viewModel, function (guy){
            return guy.name()==valueAccessor();
        })
        ko.bindingHandlers.value.update(element, model.value, allBindings, viewModel, bindingContext);
    }
};

マイ テンプレート
(配列の各要素を単純に反復する)

{{#.}}
<p>{{label}}: <input data-bind='specialValue: "{{name}}", valueUpdate: "afterkeydown"'/></p>
{{/.}}

ただし、これを行うと、何も更新されません。Knockout コードを深く調べたところ、 というプロパティ_ko_property_writersが に存在しないallBindingsObjectことがわかりましたが、この時点で Knockout を理解することはできません。

4

1 に答える 1

0

バインディングを使用してこの配列を HTML にレンダリングすると仮定すると、foreach実際には、バインディングのプロパティとして質問モデルにアクセスできますviewModel(そして、おそらくルート viewModel として$parent)。ノックアウトのバインディング コンテキストの詳細については、こちらをご覧ください。

@robert.westerlundも彼の JSFiddleで優れたソリューションを提供したようです。$indexそして、そのフィドルが示すように、ノックアウトはforeach ループ内の変数も提供することを追加する価値があります。これは便利な助けになる可能性があります。

于 2014-03-07T10:34:10.643 に答える