2

ノックアウトとフォームを使用して、エラーをスローせずにバインディングを適用するのに問題があります。

フォームのロジックをいくつかのビュー モデルに分割したいのですが、foobar をバインドしようとすると、バーと foo のバインディングが見つからないというエラーが発生します。

以下の例でこれを表示しようとしました。

望ましい動作を実現する方法はありますか? 3 つのビュー モデルのすべてのバインディングを組み合わせて、それらを foobar に割り当てる方法はありますか?

bar_observable は、barViewModel のコンストラクターで作成される ko.observable です。

<div id="foobar">
    <form data-bind="with: newFooBar, submit: submitFooBar">
        <section id="bars">
            <div data-bind="text: bars_observable"></div>
        </section>

        <section id="foos">
            foo stuff
        </section>
    </form>
</div>
<script type="text/javascript">
    $(function () {
        var foobarViewModel, fooViewModel, barViewModel;

        foobarViewModel = new ViewModels.FoobarViewModel({
            fooViewModel: new ViewModels.FooViewModel({}),
            barViewModel: new ViewModels.BarViewModel({})
        });

        ko.applyBindings(foobarViewModel, document.getElementById("foobar"));
    });  
</script>

エラーは次のようになります

"Uncaught Error: Unable to parse bindings. Message: ReferenceError: bars_observable is not defined;"
4

2 に答える 2

1

モジュラー システムを作成している場合、トップ レベルのビュー モデルを作成できない場合があります。ノックアウト 2.0 では、特定の時点でバインドの解析を停止するようノックアウトに指示できます。applyBindingsその後、コンテナーを再度呼び出すことができます。やり方を解説した記事はこちら。

http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html

于 2013-12-13T09:01:57.933 に答える
1

fooViewModel および barViewModel オブジェクトを FoobarViewModel に配置することをお勧めします。この場合、ko.applyBindings を 1 回だけ呼び出す必要があります。

<div id="foobar">
    <form data-bind="with: newFooBar, submit: submitFooBar">
        <section id="bars" data-bind="with: barViewModel">
            <div data-bind="text: bars_observable"></div>
        </section>

        <section id="foos" data-bind="with: forViewModel">
            foo stuff
        </section>
    </form>
</div>


<script type="text/javascript">
    $(function () {
        var foobarViewModel = new ViewModels.FoobarViewModel({});
        ko.applyBindings(foobarViewModel, document.getElementById("foobar"));
    });  

    function ViewModels.FoobarViewModel() {
         var self = this;
         self.fooViewModel = new ViewModels.FooViewModel({});
         self.barViewModel = new ViewModels.BarViewModel({});
         ...
    }
</script>
于 2012-07-27T14:24:50.223 に答える