cf. knockout.js

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

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /KnockoutExam/knockoutEx4_bind1.html


ソースコード

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

Text Binding

HTML Binding

CSS Binding

Style Binding

Attribute Binding


HTML#Knockout


添付ファイル: filehide.png 134件 [詳細] fileshow.png 136件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2015-03-07 (土) 23:45:21 (637d)
ISBN10
ISBN13
9784061426061