[MarionetteJS→React 002] 基本的なmodelのViewへの表示

このエントリーをはてなブックマークに追加

MarionetteJS

MarionetteJSでmodelを作って、それをItemView内に設定し、Viewにmodelのプロパティを表示するものを作ります。
ソースコードの差分はこちら

ContactViewItemViewで、templateには#contact-templateを使用しており、かつそのtemplateでは

<%- firstName %> <%- lastName %>

 

という形式でContactViewに設定されているmodelのプロパティを表示しています。これもMarionetteJSの基本的な使い方ですね。

React

ReactではComponentに「この値を使ってくれぃ」ってな感じにComponent呼び出し側からオブジェクトを渡すことができます。Componentに渡した値はそのComponent内でthis.props配下でアクセスすることができるのです。とりあえずはTypeScriptも使ってることですし、今回のサンプルデータであるAliceを作ってみると下みたいになります。

interface IContact {
  firstName: string,
  lastName: string,
  phoneNumber: string
}

// using interface rather than class for simplicity
let alice: IContact = {
  firstName: 'Alice',
  lastName: 'Arten',
  phoneNumber: '555-0184'
}

 

簡単の為、classは使わずにinterfaceだけ準備しました。
まだルートComponentしか扱っていないので、React.createElementを使ってelementを生成します。この場合には第二引数に渡したオブジェクトがComponent内でthis.propsでアクセスできるようになるのです。
Componentは以下のようになります。

class ContactManager extends React.Component {
  render () {
    return <p>
    {this.props.firstName + ' ' + this.props.lastName}
    </p>
  }
}

Componentを見たらだいたいどんな役割をもってるのかわかって頭のなかでもVisual化しやすいなー、と個人的には思います。

スクリーンショット 2015-07-31 1.07.11

めでたしめでたし。

React側のソース差分はこちら

Written on July 31, 2015
このエントリーをはてなブックマークに追加