More than 5 years have passed since last update.

Knockout.jsでapplyBindings で気をつけたいこと

knockoutjs

Posted at 2015-10-05

下記のようなviewの構成の場合、サイドバーは共通のviewmodelで、ページ毎の描画は個別のviewmodelをapplyBindings したいということがあると思います。

sample.html

<html>
 <body>
 <!-- ここは使い回ししたい -->
  <div id='side_menu'>
   サイドバーを描画
    〜
  </div>

  <!-- ここは個別にしたい -->
  <div id='main'>
   ページ毎内容を描画
   <div id='sub_main'>
　　ページにぶら下がる内容を描画
    〜
   </div>
   〜
  </div>
 </body>
</html>

その場合、applyBindings は第二引数で対象のDOMを受け付けるので下記のようにバインディングできます。

OKのパターン
第２引数で個別部分、共通部分の両者にbinging対象となるタグを指定することでbingingが有効になります。

sample.cofee

# id=mainの配下にページ個別のviewmodelをbinding
ko.applyBindings({
      main_vm: new MainViewModel(),
      sub_vm: new SubViewModel(),
    },
    getElementById('main')
)
# id=side_menuの配下に共通のviewmodelをbinding
ko.applyBindings(
    new SideMenuViewModel(),
    getElementById('side_menu')
)

NGのパターン1
【個別・共有ともに第二引数でDOMを指定しない場合】
applyBindingsには追記していくようにできていないため、下記のように指定すると後から指定しているapplyBindingsが無効となります。

sample.cofee

# id=mainの配下にページ個別のviewmodelをbinding
ko.applyBindings({
      main_vm: new MainViewModel(),
      sub_vm: new SubViewModel(),
    }
)
# id=side_menuの配下に共通のviewmodelをbinding
ko.applyBindings(
    new SideMenuViewModel()
)

NGのパターン2
【個別のみ第二引数でDOMを指定した場合】
applyBindingsの第二引数を指定しないとページ全体にbindingするためdoublebindingエラーが発生します。

sample.cofee

# id=mainの配下にページ個別のviewmodelをbinding
ko.applyBindings({
      main_vm: new MainViewModel(),
      sub_vm: new SubViewModel(),
    },
    getElementById('main')
)
# id=side_menuの配下に共通のviewmodelをbinding
ko.applyBindings(
    new SideMenuViewModel()
)

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up