8

ページ内でカスタム アプリケーション/ウィジェットを使用する非常に動的なサイトがあり、Knockout を使用してサイトを改善する方法を調査していました。

  • db <-名前空間
    • タブ[] -> タブ
      • ID
      • 題名
      • タイプ
      • アイテム[] -> ウィジェット
        • ID
        • CSS
        • 内密
        • ウィジェット固有のビューモデル
    • サービス

各「ウィジェット」が同じタブ (div) 内に存在するビューモデルである場合、どのような問題が発生しますか?

一番上から始まり、他のモデルを含む 1 つの viewModel を使用しても問題ありませんか? または、個々のモデルを用意し、ko.applyBindings(vm, element) を使用してそれらを適用する必要がありますか?

4

1 に答える 1

6

どちらの方法でも成功しましたが、通常は、あなたが言及した最初のシナリオを使用します。1 つの全体的な親ビューモデルには、他のより具体的なビューモデルのインスタンスが含まれています。一般的な慣行では、applyBindings頻繁に電話をかけないようにすることをお勧めします。ノックアウトの「with」バインディングについて簡単に言及することは、あなたのインスタンスに適しているようです: http://knockoutjs.com/documentation/with-binding.html

これにより、タブ内のバインディング式を、それらが表すビューモデルにより集中させることができます。

<script type="text/javascript">
    var ParentViewModel = function(){
        this.tabOneViewModel = new TabOneViewModel();
        this.tabTwoViewModel = new TabTwoViewModel();
    }
    var TabOneViewModel = function(){
        this.tabOneTitle = 'Tab One';
    }
    var TabTwoViewModel = function(){
        this.tabTwoTitle = 'Tab Two';
    }
    $(function(){
        var parentViewModel = new ParentViewModel();
        ko.applyBindings(parentViewModel,$('#main')[0]);
    });
</script>
<body>
    <div id="main">
        <div data-bind="with:tabOneViewModel">
            <div data-bind="text:tabOneTitle"></div>
        </div>
        <div data-bind="with:tabTwoViewModel">
            <div data-bind="text:tabTwoTitle"></div>
        </div>
    </div>
</body>

最終的には、DOM とビュー モデルをどのように構築するかは完全にあなた次第です。私たちが役立つとわかった一般的な例をレイアウトするだけです。

于 2012-10-05T20:15:37.673 に答える