1

ユーザーがリンクをクリックすると、インラインのファンシーボックスが開き、その中にhtmlが表示されるという結果を達成しようとしています。ユーザーが値を入力してEnterキーを押すと、ビューモデルが更新（ノックアウト）され、ファンシーボックスが向きを変える必要があります。

これはこれまでの私のコードです。mybindings を再適用する必要があることはわかっていますが、その方法がわかりません。

HTML:

<div style="display:none">
        <div id="inlineManufacturerAdder">
            <div style="width:1000px;">
                <!-- In deze div alle content -->
                <h2>Add new Manufacturer2</h2>
                <p>

                    <form data-bind="submit: vm.addManufacturer">
                        <input type="text" data-bind="value: vm.newManufacturer, valueUpdate: 'afterkeydown'" placeholder="New Manufacturer">
                    </form>
                </p>
            </div>
        </div>
    </div>

Javascript (タイプスクリプト):

export function viewAttached() {
    $("a.fancybox-link-add-manufacturer").click(function (e) {
        $.fancybox({
            content: $('#inlineManufacturerAdder').html(), //this is where it goes wrong, it gets the content and forgets the bindings I guess!
            type: 'html'
        });
        return false;
    });
}

通常の方法で div (display:none に設定されている) を使用すると、fancybox がなくてもすべて正常に動作します。

私は何をすべきか？デュランダル使ってます！

4

1 に答える 1

1

バインディングを再適用する必要はありません。innerHTML コンテンツを渡すのではなく、要素ノード (または jquery インスタンス) をファンシー ボックスに渡します。

例: 代わりに:

content: $('#inlineManufacturerAdder').html()

ただ行う：

content: $('#inlineManufacturerAdder')

[アップデート]

または何か長いこれらの行:

<a href="#inlineManufacturerAdder" class="fancybox-link-add-manufacturer" >Click me</a>
<div id="inlineManufacturerAdder" data-bind="html: msg"></div>

<script>
$(".fancybox-link-add-manufacturer").fancybox();
</script>

例: http://jsfiddle.net/r83XF/2/

于 2013-03-21T11:20:09.620 に答える