0

クリックでオブジェクトにバインドするのに苦労しているようですが、その理由がわかりません。私のHTMLのフラグメントは次のとおりです。

     <div class="moodControlGroup">
        <label class="control-label" for="nodeHeight">Height</label>
           <div class="controls">
              <input type="text" class="query" id="nodeHeight" data-bind="value: settings.nodes.height.value" />
              <textarea class="queryExpanded funcText" data-bind="value: settings.nodes.height.funcValue"></textarea>
           </div>
           <input class="fx btn btn-primary" type="submit" value="fx" data-bind="click: function(item) { alert(JSON.stringify(item)) ; }, css: { selected: settings.nodes.height.isFunc }" />
     </div>

私の問題は、下部にある送信ボタンにあります。設定には次の JSON 構造があります。これは、ko.mapping を使用してノックアウト オブジェクトに変換されます。

nodes: {
                width: { isFunc: false, value: 24, funcValue: "" },
                height: { isFunc: true, value: 24, funcValue: "function(d) { return d.dy; }" }, 
}...

私がやりたいことは、送信ボタンをクリックして、高さオブジェクトを取得することです:

height: { isFunc: true, value: 24, funcValue: "function(d) { return d.dy; }" }

ただし、空のオブジェクト {}、またはノード プロパティを含むわずかに高いオブジェクトしか取得できないようです。クリック イベントをターゲットにして正しい値を取得するにはどうすればよいですか? 最終的には、その背後にある isFunc 値の状態を切り替えて、CSS を更新できるようにしたいのですが、チェックボックス コントロールを使用したくありません。

誰かが私が間違っているかもしれないことを提案できますか?

ありがとう

4

1 に答える 1

1

クリック ハンドラーで「this」値を利用する場合は、KO のコンテキストを作成する必要があります。コレクション (foreach) を反復していないため、外側の div などで「with」バインディングを使用してみてください。または、すぐに試してみたい場合は、送信ボタンの周りにラッパー div をスローし、その上で。

このようなもの：

<div data-bind="with: settings.nodes.height">
    <input class="fx btn btn-primary" type="submit" value="fx" data-bind="click: function(item) { alert(JSON.stringify(item)) ; }, css: { selected: isFunc }" />
</div>

最終的なコードがどのようになるかはわかりませんが、このブロックで行うことがすべて settings.nodes.height にバインドする場合は、'with: settings. nodes.height' を最も外側の div に配置します。次に、すべての子孫バインディングを高さオブジェクト内のプロパティだけに減らすことができます。このような：

<div class="moodControlGroup" data-bind="with: settings.nodes.height">
        <label class="control-label" for="nodeHeight">Height</label>
           <div class="controls">
              <input type="text" class="query" id="nodeHeight" data-bind="value: value" />
              <textarea class="queryExpanded funcText" data-bind="value: funcValue"></textarea>
           </div>
           <input class="fx btn btn-primary" type="submit" value="fx" data-bind="click: function(item) { alert(JSON.stringify(item)) ; }, css: { selected: isFunc }" />
     </div>

更新: コメントでの短い議論の後、あなたのコードを jsFiddle に貼り付けることにしました。

このフィドルは、外側の div で「with」バインディングを使用しないため、ルート ViewModel は、クリック ハンドラーの「this」がバインドされているものです (これは望ましくないように聞こえます)。ko.mapping.toJSON を使用して「this」をダンプする「fx2」ボタンを追加しました。コメントで説明されているように、 JSON.stringify は、この時点で実際に関数である監視可能なプロパティを表示しません。

この他のフィドルは、外側の div に data-bind="with: settings.nodes.height" を導入します。したがって、クリック ハンドラーの 'this' は、settings.nodes.height オブジェクトを参照するようになりました。

于 2013-04-15T16:39:00.070 に答える