HTML KnockoutJS data-bind1 Controlling text and appearance

2020-01-252020
6.7% (24.8/366)
January
80% (24.8/31)
Week 04
83% (5.8/7)
Day 25 Sat
81.1% (19.4/24)

訪問者

total: 4086
today: 2
yesterday: 2
now: 11

↑

更新

MenuBar

サンプルアプリケーション
ソースコード
Visible Binding
Text Binding
HTML Binding
CSS Binding
Style Binding
Attribute Binding

cf. knockout.js

サンプルアプリケーション †

↑

ソースコード †

https://github.com/kagyuu/KnockoutExam/blob/master/knockoutEx4_bind1.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>knockdown.js Ex4</title>
    <style>
h1 {
    color: hsl(120, 50%, 50%);
    padding-left: 5px;
    border-bottom: 4px solid hsl(120, 50%, 50%);
    font-size: medium;
}

.colRed {
	color: red;
}
.colOrange {
	color: orange;
}
.colBlue {
	color: blue;
}
    </style>
    <script type="text/javascript" charset="UTF-8" src="js/lib/require.js" data-main="js/knockoutEx4_init.js"></script>
  </head>
  <body>
    <h1>Visible, If, Ifnot Binding Example</h1>
    <div data-bind="visible: shouldShowMessage">
      visible このメッセージは "shouldShowMessage" が true を保持している場合にのみ表示されます。
    </div>
    <div data-bind="if: shouldShowMessage">
      if このメッセージは "shouldShowMessage" が true を保持している場合にのみ存在します。
    </div>
    <div data-bind="ifnot: shouldShowMessage">
      ifnot このメッセージは "shouldShowMessage" が false を保持している場合にのみ存在します。
    </div>
    <button data-bind="click: btnShowMessageClick, text: shouldShowMessage() ? 'Hide' : 'Show'"></button>
    
    <h1>Text Binding Example</h1>
    <p>
	    <input type="range" min="0" max="50" data-bind="value: sldValue"/>
	    <span data-bind="text: txtValue"></span>
    </p>

	<h1>HTML Binding Example</h1>
    <p>
    	<div data-bind="html: planet" style="width:240px"></div>
    	<button data-bind="click: btnPrevPlaent">Prev</button>
    	<button data-bind="click: btnNextPlaent">Next</button>
    </p>
    
    <h1>CSS Binding Example</h1>
    <p>
    	<label><input type="radio" name="color" value="Red" data-bind="checked: radioSelectOptionValues" />Red</label>
    	<label><input type="radio" name="color" value="Orange" data-bind="checked: radioSelectOptionValues" />Orange</label>
    	<label><input type="radio" name="color" value="Blue" data-bind="checked: radioSelectOptionValues" />Blue</label>
    	⇒ <span data-bind="text: txtColor, css: cssColor"></span><br/>
    	
	    <input type="range" min="-100" max="100" data-bind="value: sldCss"/>
	    ⇒ <span data-bind="text: txtCss, css : {colBlue : sldCss() < 0, colRed : sldCss() > 50}"></span>
    </p>
    
    
    <h1>Style Binding Example</h1>
    <p>
	    <input type="range" min="-100" max="100" data-bind="value: sldStyle"/>
	    ⇒ <span data-bind="text: txtStyle, style : {color : (sldStyle() < 0 ? 'blue' : 'red'), fontWeight : (sldStyle() < 0 ? 'bold' : 'normal')}"></span>
	    <!-- CSS の font-weight など "-" を含む Style 属性は、knockout.js では Camel(らくだ) にする ex. font-weight -> fontWeight) -->
    </p>
    
    <h1>Attribute Binding Example</h1>
    <p>
    	<label><input type="radio" name="pen" value="Rotling" data-bind="checked: radioPen" />Rotling</label>
    	<label><input type="radio" name="pen" value="Sheaffer" data-bind="checked: radioPen" />Sheaffer</label>
    	<label><input type="radio" name="pen" value="Parker" data-bind="checked: radioPen" />Parker</label><br/>
		<a href="" data-bind="text: penHref, attr : {href : penHref}"></a>
		<!-- href="" がないと、リンクの CSS が適用されない -->
    </p>
    
  </body>
</html>

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutEx4_init.js

/*
 * アプリケーションのイニシャライザ.
 */
require.config({

  // Javascript の Base Url
  baseUrl: 'js/lib',

  // ライブラリのパスの別名を定義する
  paths: {
   'app':      '../',
   'knockout' : 'knockout-3.2.0',
  },

  // AMDに対応してないモジュールを読み込む
  shim: {
  }
});

require(['knockout', 'app/knockoutEx4_vmodel', 'domReady!'],
  function(ko, vmdl) {
    ko.applyBindings(new vmdl());
  }
);

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutEx4_vmodel.js

/*
 * アプリケーションの View Model.
 */
define(['knockout'], function(ko) {

  return function appViewModel() {
    // ---------- visible
    this.shouldShowMessage = ko.observable(false);
    this.btnShowMessageClick = function() {
      this.shouldShowMessage(!this.shouldShowMessage());
    };
    
    // ---------- text
    this.sldValue = ko.observable(0);
    this.txtValue = ko.computed(function() {
        return this.sldValue();
    }, this);
    
    // ---------- html
    this.planetNo = ko.observable(0);
    
    this.planet = ko.computed(function() {
      return "<fieldset>"
        + "<legend>" + PLANETS[this.planetNo()].name + "</legend>"
        + "<img src=\"" + PLANETS[this.planetNo()].img + "\" width=\"200px\" height=\"200px\"/>"
        + "</fieldset></div>";
    }, this);
    this.btnNextPlaent = function() {
	    this.planetNo((this.planetNo() + 1) % PLANETS.length);
    };
    this.btnPrevPlaent = function() {
        var prev = this.planetNo() - 1;
	    this.planetNo(prev > 0 ? prev : PLANETS.length - 1);
    };
    
    // ---------- css
    this.radioSelectOptionValues = ko.observable("Orange");
    this.txtColor = ko.computed(function() {
        return this.radioSelectOptionValues();
    }, this);
    this.cssColor = ko.computed(function() {
        return 'col' + this.radioSelectOptionValues();
    }, this);
    
    this.sldCss = ko.observable(0);
    this.txtCss = ko.computed(function() {
        return this.sldCss();
    }, this);
    
    // ---------- style
    this.sldStyle = ko.observable(0);
    this.txtStyle = ko.computed(function() {
        return this.sldStyle();
    }, this);
    
    // ---------- attribute
    this.radioPen = ko.observable('Rotling');
    this.penHref = ko.computed(function() {
        switch(this.radioPen()) {
        case 'Rotling':
        	return "http://www.rotring.com/";
        case 'Sheaffer':
        	return "https://www.sheaffer.com/";
        default:
        	return "http://www.parkerpen.com/";
        };
    }, this);
  };
});

var PLANETS = [
  {name : 'Earth', img : "http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/240px-Earth_Eastern_Hemisphere.jpg"},
  {name : 'Mars', img : "http://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Mars_Valles_Marineris.jpeg/240px-Mars_Valles_Marineris.jpeg"},
  {name : 'Jupiter', img : "http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Jupiter_by_Cassini-Huygens.jpg/249px-Jupiter_by_Cassini-Huygens.jpg"},
  {name : 'Saturn', img : "http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Saturn-cassini-March-27-2004.jpg/320px-Saturn-cassini-March-27-2004.jpg"},
  {name : 'Uranus', img : "http://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Uranus2.jpg/240px-Uranus2.jpg"},
  {name : 'Neptune', img : "http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/244px-Neptune.jpg"},
  {name : 'Mercury', img : "http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Mercury_in_color_-_Prockter07_centered.jpg/242px-Mercury_in_color_-_Prockter07_centered.jpg"},
  {name : 'Venus', img : "http://upload.wikimedia.org/wikipedia/commons/e/e5/Venus-real_color.jpg"},
];

↑

Visible Binding †

[概要] 表示非表示の切り替え
- data-bind="visible:
- data-bind="if:
- data-bind="ifnot:

HTML

<h1>Visible Binding Example</h1>
<div data-bind="visible: shouldShowMessage">
  visible このメッセージは "shouldShowMessage" が true を保持している場合にのみ表示されます。
</div>
<div data-bind="if: shouldShowMessage">
  if このメッセージは "shouldShowMessage" が true を保持している場合にのみ存在します。
</div>
<div data-bind="ifnot: shouldShowMessage">
  ifnot このメッセージは "shouldShowMessage" が false を保持している場合にのみ存在します。
</div>
<button data-bind="click: btnShowMessageClick, text: shouldShowMessage() ? 'Hide' : 'Show'"></button>

View Model

this.shouldShowMessage = ko.observable(false);
this.btnShowMessageClick = function() {
  this.shouldShowMessage(!this.shouldShowMessage());
};

<div> などの表示・非表示を切り替える
if、ifnot は、DOM 要素を DOM ツリーから取り去ってしまう
display は style の display の none ⇔ display を切り替える
Hide
Show

↑

Text Binding †

[概要] HTML要素の挿入
- data-bind="value:
- data-bind="text:

HTML

<h1>Text Binding Example</h1>
<p>
    <input type="range" min="0" max="50" data-bind="value: sldValue"/>
    <span data-bind="text: txtValue"></span>
</p>

View Model

this.sldValue = ko.observable(0);
this.txtValue = ko.computed(function() {
  return this.sldValue();
}, this);

<span> などに text を入れ込む
内部的には span.innerText( text )

HTML に三項演算子を使える

<span data-bind="text: price() > 50 ? '高額' : '安価'"></span>

↑

HTML Binding †

[概要] HTMLイベントと vmodel.function() の対応づけ
- data-bind="click: function

HTML

<h1>HTML Binding Example</h1>
<p>
    <div data-bind="html: planet" style="width:240px"></div>
    <button data-bind="click: btnPrevPlaent">Prev</button>
    <button data-bind="click: btnNextPlaent">Next</button>
</p>

View Model

this.planetNo = ko.observable(0);
    
this.planet = ko.computed(function() {
  return "<fieldset>"
    + "<legend>" + PLANETS[this.planetNo()].name + "</legend>"
    + "<img src=\"" + PLANETS[this.planetNo()].img + "\" width=\"200px\" height=\"200px\"/>"
    + "</fieldset></div>";
}, this);

this.btnNextPlaent = function() {
    this.planetNo((this.planetNo() + 1) % PLANETS.length);
};
this.btnPrevPlaent = function() {
    var prev = this.planetNo() - 1;
    this.planetNo(prev > 0 ? prev : PLANETS.length - 1);
};

<div> などに html を入れ込む
内部的には div.innerHtml( html )

↑

CSS Binding †

[概要] CSS の切り替え
- data-bind: css : {colBlue : sldCss() < 0, colRed : sldCss() > 50}
- sldCss() が 0未満なら colBlue を設定。50より大きければ colRed を設定

CSS

.colRed {
&#160;&#160;&#160;&#160;color: red;
}
.colOrange {
&#160;&#160;&#160;&#160;color: orange;
}
.colBlue {
&#160;&#160;&#160;&#160;color: blue;
}

HTML

<h1>CSS Binding Example</h1>
<p>
    <label><input type="radio" name="color" value="Red" data-bind="checked: radioSelectOptionValues" />Red</label>
    <label><input type="radio" name="color" value="Orange" data-bind="checked: radioSelectOptionValues" />Orange</label>
    <label><input type="radio" name="color" value="Blue" data-bind="checked: radioSelectOptionValues" />Blue</label>
    ⇒ <span data-bind="text: txtColor, css: cssColor"></span><br/>
        
    <input type="range" min="-100" max="100" data-bind="value: sldCss"/>
    ⇒ <span data-bind="text: txtCss, css : {colBlue : sldCss() < 0, colRed : sldCss() > 50}"></span>
</p>

View Model

this.radioSelectOptionValues = ko.observable("Orange");
this.txtColor = ko.computed(function() {
    return this.radioSelectOptionValues();
}, this);
this.cssColor = ko.computed(function() {
    return 'col' + this.radioSelectOptionValues();
}, this);
    
this.sldCss = ko.observable(0);
this.txtCss = ko.computed(function() {
    return this.sldCss();
}, this);

var PLANETS = [
 {name : 'Earth', img : "http://upload.wikimedia.org/wik ...},
 {...},
 ...
];

CSS に即値でクラス名を設定する

<input type="range" min="-100" max="100" data-bind="value: sldCss"/>

条件によってクラス適用を ON/OFF する

<span data-bind="text: txtCss, css : {colBlue : sldCss() < 0, colRed : sldCss() > 50}"></span>

↑

Style Binding †

[概要] style 属性の設定
- data-bind="style : {color : (sldStyle() < 0 ? 'blue' : 'red'), fontWeight : (sldStyle() < 0 ? 'bold' : 'normal')}"

HTML

<h1>Style Binding Example</h1>
<p>
    <input type="range" min="-100" max="100" data-bind="value: sldStyle"/>
    ⇒ <span data-bind="text: txtStyle,
      style : {color : (sldStyle() < 0 ? 'blue' : 'red'), fontWeight : (sldStyle() < 0 ? 'bold' : 'normal')}"></span>
    <!-- CSS の font-weight など "-" を含む Style 属性は、knockout.js では Camel(らくだ) にする ex. font-weight -> fontWeight) -->
</p>

View Model

this.sldStyle = ko.observable(0);
this.txtStyle = ko.computed(function() {
    return this.sldStyle();
}, this);

style を指定する。例のように３項演算子で値を指定することができる。即値で与えることも可能だが、あまりそういう使い方はしないだろう
font-weight などの "-" を含む style 属性は、Camel で指定する。(JSON の key として不正なため)

↑

Attribute Binding †

[概要] タグ属性の適用
- data-bind="attr : {href : penHref}"

HTML

<h1>Attribute Binding Example</h1>
<p>
    <label><input type="radio" name="pen" value="Rotling" data-bind="checked: radioPen" />Rotling</label>
    <label><input type="radio" name="pen" value="Sheaffer" data-bind="checked: radioPen" />Sheaffer</label>
    <label><input type="radio" name="pen" value="Parker" data-bind="checked: radioPen" />Parker</label><br/>
    <a href="" data-bind="text: penHref, attr : {href : penHref}"></a>
    <!-- href="" がないと、リンクの CSS が適用されない -->
</p>

View Model

this.radioPen = ko.observable('Rotling');
this.penHref = ko.computed(function() {
    switch(this.radioPen()) {
    case 'Rotling':
        return "http://www.rotring.com/";
    case 'Sheaffer':
        return "https://www.sheaffer.com/";
    default:
        return "http://www.parkerpen.com/";
    };
}, this);

HTML の tag の属性を操作する
data-name などの "-" を含む tag 属性は、'data-name' のように’’で囲む。(JSON の key として不正なため)

disable 属性の切り替えをするためには、disable バインディングを使う

<button data-bind="disable : btnDisabled">GO!</button>

this.btnDisabled = ko.computed(function() {
  // 項目 A,B,C のどれかが空欄なら GO! ボタンは押せない
  return this.a() === '' || this.b() === '' === this.c() === '';	
})

のように、true/false で disable 属性の有り無しを切り替える

HTML#Knockout

HTML KnockoutJS data-bind1 Controlling text and appearance

目次

訪問者

更新

最新の10件

人気の10件

MenuBar

サンプルアプリケーション †

ソースコード †

https://github.com/kagyuu/KnockoutExam/blob/master/knockoutEx4_bind1.html

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutEx4_init.js

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutEx4_vmodel.js

Visible Binding †

Text Binding †

HTML Binding †

CSS Binding †

Style Binding †

Attribute Binding †