HTML KnockoutJS View と View Model の data-bind を詳しく見る

目次

FrontPage
・Windows11
・Chromebook
・Random
・機械学習
・さくらVPS
・Fedora13
・SuSe10
・Docker
・Ansible
・Java
・Scala
・Python
・Ruby
・Lisp
・Computer
・GIS
・HTML
・Culture
・Link

訪問者

total: 5650
today: 4
yesterday: 2
now: 37

更新

最新の10件

人気の10件

MenuBar

書き途中

• 「HTML KnockoutJS HelloWorld」 を簡略化したコード
  • View (HTML)

     <p>First name: <input data-bind="value: firstName" title="個人名を入力してください" /></p>
     <p>Last name : <input data-bind="value: lastName" title="姓を入力してください" /></p>
     <p>Full name : <strong data-bind="text: fullName"></strong></p>
     <button data-bind='click: registerClick, disable: isEnableRegister'>Search</button>
    

  • View Model (Javascript)

     ko.applyBindings({
       firstName : ko.observable('Bert'),
       lastName  : ko.observable('Simpson'),
       fullName  : ko.computed(function() {
         return this.firstName() + " " + this.lastName()
       }, this),
       registerClick : function() {
         // submit entry
       },
       isEnableRegister : ko.computed(function(){
         return '' === this.firstName() || '' === this.lastName();
       }, this)
     });
    

• knocoout.js は、View (HTML) と　　View Model (Javascript) を結びつける
• View (HTML) 側では、View Model 都の結びつきは、HTMLタグの data-bind 属性で定義する

  <elem data-bind="?"></elem>	view model属性	機能
  visible : p	p : boolean	表示/非表示切り替え。elem.style.display='block/none'
  text : p	p : string	elem.innerText(p)
  html : p	p : string	elem.innerHtml(p)
  css : {class1 : p1, class2 : p2}	p : boolean	css class の適用/非適用の切り替え。data-bind 属性には式を書ける "css : {deficit : profit() < 0}" も OK
  style : {style1 : p1, style2 : p2}	p : string	style の設定。data-bind 属性には式を書ける "style : {color : profit() < 0 ? 'red' : 'green'}" も OK
  attr : {arrt1 : p1, arrt2 : p2}	p : string	attribute の設定

HTML#Knockout