投稿記事

knockout.js select

02 Jun 2014

knockout.js で、 selectの値を変更したときに関数を実行するには

  this.selectedYear = ko.observable('2013');
  this.selectedMonth = ko.observable('03');

  // 年が変更されたときに呼ばれる
  this.year = ko.computed(function() {
        draw(this.selectedYear());
  }, this);
  // 月が変更されたときに呼ばれる
  this.month = ko.computed(function() {
        draw(this.selectedMonth());
    }, this);
  
  function draw(s){

    svg01.select("text").remove();
    svg01.append("text")
        .attr("x", 10)
        .attr("y", 40)
        .text(s)
        .attr("font-family", "sans-serif")
        .attr("font-size", "24px")
        .style("fill", "#ccc");

  };
  this.selectedYear2 = ko.observable('2013');
  this.selectedMonth2 = ko.observable('03');
  // 年が変更されても呼ばれない
  this.year2 = ko.computed(function() {
        draw3(this.selectedYear2());
  }, this);
  // 月が変更されても呼ばれない
  this.month2 = ko.computed(function() {
        draw3(this.selectedMonth2());
    }, this);
  // 年か月が変更されると呼ばれる  
  this.yearmonth2 = ko.computed(function() {
        draw4(this.selectedYear2()+this.selectedMonth2());
    }, this);

  function draw3(s){

    svg02.select("text").remove();
    svg02.append("text")
        .attr("x", 10)
        .attr("y", 40)
        .text(s)
        .attr("font-family", "sans-serif")
        .attr("font-size", "24px")
        .style("fill", "#ccc");

  };

  function draw4(s){

    svg02.select("text").remove();
    svg02.append("text")
        .attr("x", 10)
        .attr("y", 80)
        .text(s)
        .attr("font-family", "sans-serif")
        .attr("font-size", "24px")
        .style("fill", "gold");

  };

computed の内部で使用されているobservable変数が変更されると関数が起動します。

computed の内部で、2つのobservable変数を使った場合、どちらかが変更されると起動します。この場合、2つの変数の1つだけを別のcomputedで使っていても、そちらは起動しない。両方使用しているほうが優先される。