動機について少し

こんにちは、カブロビテス。 少し前に、 RivetsJSライブラリーに会いました。 データバインディング用のツールしか含まれていませんが、私は気に入っています。 すぐに言いたいのですが、これらの素晴らしいAngularJSや他のフレームワークがあると主張するつもりはありませんが、個人的には、Angularのような強力なツールを接続する意味はありません。 したがって、これらの目的のために、RivetsJSを選択しました。 そして今、彼の文書をロシア語に翻訳するというアイデアに触発されて、私はこの記事を書いています。 動機は単純です-このライブラリについて話すのは、たぶん私の意見だけで、少し「壊れた」英語で書かれたドキュメントを翻訳する以上のものはありませんでした。 行きましょう。



PS私はすぐに謝罪します、これは私の最初の翻訳です、たぶん私は超過激な翻訳者ではないでしょう。 何かおかしいと思われる場合、または間違いを見つけた場合は、お知らせください。すぐに修正します。 事前に感謝します。

RivetsJSドキュメント

ガイド

• 設置
• 使用する
• バインディング
• フォーマッター
• コンポーネント
• アダプター
• プロパティ
• バインディング反復

参考書

• テキスト
• html
• 見せる
• 隠す
• 有効
• 障害者
• もし
• でない限り
• 価値
• チェック済み
• 未チェック
• on- [イベント]
• 各-[アイテム]

ガイド

設置

GitHubから最新の安定バージョンをダウンロードするか、選択したパッケージマネージャーを使用してインストールできます。 現在、npm、component、jam、bowerでのリリースをサポートしています（推奨）。

bower install rivets
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

リベットはサイトグラスと密接な関係があります。 Sightglassを個別に接続する場合は、必ず最初に接続してください。

 <script src="bower_components/sightglass/index.js"></script> <script src="bower_components/rivets/dist/rivets.min.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、両方のライブラリを含むRivetsパッケージをプラグインできます。

 <script src="bower_components/rivets/dist/rivets.bundled.min.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

注：CommonJSモジュールと、 RequireJSやalmondなどのAMDスクリプトローダーは、必要に応じて完全にサポートされています。

使用する

パターン

テンプレートは、プレーンHTMLでUIによって形成されます。 テンプレート要素を使用してドキュメント内で直接定義するか、好きな方法で保存およびロードできます。 便利な方法を使用して、データをテンプレートに出力するだけです。

 <section id="auction"> <h3>{ auction.product.name }</h3> <p> : { auction.currentBid | money }</p> <aside rv-if="auction.timeLeft | lt 120"> !     { auction.timeLeft | time }. </aside> </section>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例の重要な要素は、接頭辞「rv-」を持つ属性を追加することと、 「{...}」のセクションを強調表示およびラップすることです。 これらの要素はバインディングステートメントであり、これはデータをテンプレートに渡す方法です。 すべての宣言は、短く表現力豊かな構文を使用します。



(keypath | ) [...]









キーパスは、観測データを受け取り、変更が発生したときにバインディングを修正します。 プリミティブは、文字列、数値、ブール値、null、または未定義です。

フォーマッタ、それらのプロパティと機能の詳細については、対応する章で説明します。

バインディング

テンプレートの要素でrivets.bindを呼び出して、出力したいデータを渡します。

 rivets.bind($('#auction'), {auction: auction})
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

rivets.bindを呼び出すたびに、データ表現の完全なセットが返されます。 view.unbind（）を使用して、バインディングイベントを停止します。

構成

rivets.configureを使用して、アプリケーションを構成します。 必要に応じて、特定のビューですべての設定をローカルで置換できることに注意してください。

 rivets.configure({ //     prefix: 'rv', //     -. preloadData: true, // Root sightglass interface for keypaths rootInterface: '.', //       templateDelimiters: ['{', '}'], //    on-* binder handler: function(target, event, binding) { this.call(target, event, binding.view.models) } })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バインダー

バインダーは、観察されたプロパティが変更されたときにDOMを更新する方法をRivets.jsに指示する命令のセットです。 Rivets.jsには、利便性のために頻繁に使用されるバインダーが付属しています。 Rivets.jsに付属している組み込みのバインダーの使用方法については、リファレンスを参照してください。

最初は、組み込みのバインダーを使用して基本的なUIタスクを実行できますが、アプリケーションのタスクの実行に固有の独自のバインダーでRivets.jsを拡張することを強くお勧めします。

片面バインダー

一方向バインダーは、モデルプロパティが変更されるとDOMを更新します（モデルビューのみ）。 モデルのプロパティが変更されたときに要素の色を更新するバインダーが必要だとしましょう。 ここでは、単純なクロージャーによって一方向バインダーを定義できます。 この関数は、要素とモデルプロパティの現在の値を受け入れます。これを使用して、要素プロパティを更新します。

 rivets.binders.src = function(el, value) { var href = "/my/path/to/image/" + value el.setAttribute("src ", src); } rivets.binders.alt = function(el, value) { var alt = value el.setAttribute("alt", alt); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記の特定のバインダーを使用すると、テンプレートで「 rv-src 」と「 rv-alt 」を使用できます。

 <img rv-src="data.image" rv-alt=”data.title” />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

両面バインダー

片面バインダーのような両面バインダーは、モデルのプロパティが変更されると（モデルビュー）DOMを更新できますが、ユーザーが認証データを入力してクリックすることで個人アカウントを更新するなど、DOMと対話するときにモデルを更新することもできます（ビューモデル）送信、またはサードパーティのウィジェットとの相互作用。

ユーザーがDOMと対話するときにモデルを更新するには、このDOM要素をバインドおよびバインド解除してこのモデルに値を設定する方法をRivets.jsに指示する必要があります。 バインダーを単純なクロージャー関数として宣言する代わりに、両面バインダーはいくつかの追加関数を含むオブジェクトとして宣言されます。

 rivets.binders.toggle = { bind: function(el) { adapter = this.config.adapters[this.key.interface] model = this.model keypath = this.keypath this.callback = function() { value = adapter.read(model, keypath) adapter.publish(model, keypath, !value) } $(el).on('click', this.callback) }, unbind: function(el) { $(el).off('click', this.callback) }, routine: function(el, value) { $(el)[value ? 'addClass' : 'removeClass']('enabled') } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

API

バインダ。バインド

この関数は、view.bind（）を初期化するために呼び出され、バインディングの初期状態を保存したり、イベントリスナーを要素に割り当てたりするために使用します。



バインダ.unbind

この関数は、view.unbind（）を初期化するために呼び出されます。 これを使用して、binder.routineによって変更される要素の状態をリセットしたり、binder.bind関数で設定した要素のイベントリスナーを解放したりします。



バインダ。ルーチン

テンプレート関数は、モデルの観測された属性が変更されたときに呼び出され、DOMの更新に使用されます。 一方向バインディングが単純なクロージャー関数として宣言されている場合、実際に定義するのはルーチン関数です。



バインダ。パブリッシュ

view.publish（）を呼び出してこれらのバインダーを公開する場合は、trueに設定します。

フォーマッター

フォーマッターは、着信および/または発信バインディング値を変更する関数です。 これらを使用して、日付、数値、通貨などをフォーマットできます。 フォーマッタは、出力データを処理する必要がある場合に非常に役立ち、サーバーをロードしないために、クライアントをロードできます。 たとえば、サーバーからタイムスタンプ形式の日付を取得します。 クライアント上でフォーマッタを使用すると、1つの関数を記述し、それをすべてのバインダーで使用することで、タイムスタンプを目的の日付形式に変換できます。

一方向フォーマッター

これらは、書式設定を使用する最も一般的で実用的な方法であり、値に対する単純な読み取り専用の変更です。 以下の例では、イベントの終了までの残り日数のフォーマッターを決定できます。 イベントの終わりが3日目になると仮定します。

 rivets.formatters.remain = function(value){ value = parseInt(value / 86400); return value; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フォーマッタは、バインダーを宣言するときに使用されます。記号「|」 区切り文字として使用されます。

 <span rv-text="event.endDate | remain"></span>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

両面フォーマッタ

双方向フォーマッタは、コストをドルなどの特定の形式で保存すると同時に、ルーブルなどの異なる形式でデータを入力できるようにする場合に便利です。

フォーマッターを単純なクロージャー関数として宣言する代わりに、読み取りおよび発行関数を含むオブジェクトとして宣言できます。 フォーマッターが単純なクロージャーとして宣言されている場合、Rivetsは読み取り専用であると想定しますが、フォーマッターがオブジェクトとして宣言されている場合、Rivetsは読み取りおよび公開関数を使用して値を効率的にシリアル化および逆変換します。

金銭的な価値をドルで保存したいが、ユーザーがこの値をルーブルで入力できるようにすると、フォーマッターはこの値をモデルに入力するときに外国為替市場の値でこれらの値を自動的に変換します（この値がロードされた瞬間にドロップします）。 この目的のために、双方向の通貨フォーマッターを使用します。

 rivets.formatters.currency = { read: function(value) { return (value / 50) }, publish: function(value) { return Math.round(parseInt(value) * 50) } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、片面または両面の任意のタイプのバインディングでフォーマッターを使用してバインディングを作成できます。

 <input rv-value="item.price | currency">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

双方向フォーマッタを他の任意の順序で任意の順序で関連付けることもできます。 これらは左から右に読み取られ、右から左に発行され、データをモデルに発行（挿入）するときに読み取り専用フォーマッターをスキップします。

フォーマッタ引数

フォーマッタは、 キーパスとプリミティブの形式で任意の数の引数を受け入れることができます。

フォーマッタは、「|」文字を使用して値を区切ることができます。

フォーマッタの引数は、 キーパスとプリミティブです。 キーパスは、フォーマッタへの引数として、通常のキーパスのすべてのプロパティと機能を継承します。

（フォーマッター）[キーパス| プリミティブ...]

 <span>{ alarm.time | time user.timezone 'hh:mm' }</span>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バインディング宣言の各引数の値が評価され、追加の引数としてフォーマッタ関数に渡されます。

 rivets.formatters.time = function(value, timezone, format) { return moment(value).tz(timezone).format(format) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンポーネント

コンポーネントを使用すると、任意のテンプレートで使用できる再利用可能なビューを定義できます。 これは、バインダーに関連してテンプレートにコンポーネントを埋め込む必要がある場合に役立ちます。 バインダーは独自の属性を定義し、コンポーネントはネイティブ要素として定義されます。

コンポーネントオブジェクトは、コンポーネントのテンプレートを返すテンプレート関数として定義する必要があります（HTML文字列、または別の必要な要素を使用できます）。 また、テンプレートにバインドするための特別なスコープオブジェクトを返す初期化関数も定義する必要があります（この関数はMVCといくつかの類似点があります）。

 rivets.components['todo-item'] = { //    . template: function() { return JST['todos/todo-item'] }, //          // (  rivets.init      . initialize: function(el, data) { return new ItemController({ item: data.item }) } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テンプレート内でコンポーネントを使用するには、コンポーネントキーと同じタグ名を持つ要素を使用するだけです。 すべての要素属性は、初期化コンポーネントの関数に挿入される前にキーパスと見なされます。

 <todo-item item="myItem"></todo-item>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、特定の属性をキーパスではなく静的にしたい場合は、静的に設定できます。

 rivets.components['todo-item'] = { static: ['list-style'], … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 <todo-item item="myItem" list-style="condensed"></todo-item>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンポーネントは、テンプレートの外部で独自に初期化することもできます。 これは、たとえばアプリケーションを最初に開いたときに表示されるモーダルウィンドウとして、新しいビューを自分でDOMに挿入する場合に便利です。 このAPIはrivets.bindと似ていますが、現在のテンプレート\要素を渡す代わりに、このコンポーネントテンプレートをレンダリングする親要素のコンポーネント名とそのクラス\識別子\タグのみを渡す点が異なります。

 rivets.init('my-app', $('body'), {user: user}) rivets.init('todo-item', $('#modal-content'), {item: myItem})
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アダプター

Rivets.jsは、オブジェクトとその説明にとらわれません。 これにより、非常に柔軟になり、他のライブラリやフレームワークとともに開発に適応および適応できますが、これらのオブジェクトまたはそれらのオブジェクトをどのように記述するかをRivet.jsに伝える必要があります。 この機能は、Sightglassライブラリーによって管理されます。

各アダプターは、キーとキーパスを分離するために使用される一意のインターフェイス（単一文字）として定義されます。 キーパスで使用されるインターフェースは、各中間キーに使用するアダプターを決定します。



user.address:city









上記の例では、キーパスはアダプター「。」を使用しています。 ユーザーオブジェクトのアドレスキーにアクセスするには、アダプター::アドレスオブジェクトの都市キーにアクセスします。 アドレスが通常、バックボーンモデルを指すユーザーオブジェクトのプロパティであるが、実際には都市はバックボーンモデルの属性であると想像してください。この種の指定が実際に簡潔で表現力豊かであることがわかります。

統合アダプター

Rivets.jsにはアダプターが付属しています。 単純なJavasciptオブジェクトのプロパティを説明します。 このアダプターは、サンプルのObject.definePropertyを使用して、ES5（ECMAScript 5）に既に実装されています。 将来、このアダプタは、ブラウザがサポートを開始するとすぐに、Object.observeのみを使用して実装されます。

ES5をサポートしないブラウザー（<IE 9）を使用する必要がある場合、このアダプターを、必要なブラウザーをサポートするポリファイルまたはサードパーティライブラリに置き換えることができます。 たとえばChromeのみを使用する場合は、Object.observeを使用して結果を確認してください。

アダプターを作成します。

アダプターは、プロパティ名としてインターフェースを使用し、値としてアダプターオブジェクトを使用して、rivets.adaptersを使用して定義されます。

次のアダプター:: Backbone.jsおよびStapes.jsモジュールの両方で機能します。

 rivets.adapters[':'] = { observe: function(obj, keypath, callback) { obj.on('change:' + keypath, callback) }, unobserve: function(obj, keypath, callback) { obj.off('change:' + keypath, callback) }, get: function(obj, keypath) { return obj.get(keypath) }, set: function(obj, keypath, value) { obj.set(keypath, value) } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

設計プロパティ

設計プロパティは、1つ以上の依存プロパティが変更されたときに再評価データを受け取る関数です。 計算されたプロパティは、Rivets.jsで非常に単純に宣言され、「<」記号を使用して関数を依存関係から分離するだけです。 次のバインディングの例は、開始属性または終了属性が変更されたときにevent.duration（）で再評価されます。

 <span rv-text="event.duration < start end"></span>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

依存キーパスは、モデルコンテキストからではなく、ターゲットから取得されることに注意してください。 したがって、上記の例では、ターゲットはイベントオブジェクトであり、依存関係はevent.startとevent.endです。

バインディングの反復。

Rivets.jsで提供されるrv-each- [item]バインダーを使用して、配列のすべての要素をループアウトし、この要素の関連インスタンスを追加します。

 <ul> <li rv-each-todo="list.todos"> <input type="checkbox" rv-checked="todo.done"> <span>{ todo.summary }</span> </li> <ul>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

参考書

テキスト

要素にテキストを出力する

 <h1 rv-text="user.name"></h1>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

補間を使用してテキストを出力することもできます。

 <p>{ user.name } is { user.age } years old.</p>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

html

HTMLコンテンツを要素に出力します。

 <section rv-html="item.summary"></section>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

見せる

値に応じた要素の出力-trueの場合、出力、falseの場合、非表示。

 <button rv-show="user.admin">Remove</button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

隠す

逆rv-show属性（trueに設定されている場合は非表示、falseの場合は印刷）。

 <section rv-hide="feature.disabled"></section>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

有効

要素のアクティビティを指定する属性。 True-要素は有効になり、False-無効になります。

 <button rv-enabled="user.canVote">Upvote</button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

障害者

逆属性はrv対応です。 True-無効、False-有効。

 <button rv-disabled="user.suspended">Upvote</button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

もし

値がtrueの場合、DOMにノードと同様にバンディット要素を挿入し、値がfalseと見なされる場合は要素を表示しません。

 <section rv-if="item.editable"></section>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

でない限り

逆属性はrv-ifです。

 <section rv-unless="item.locked"></section>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

価値

属性が変更されたときに要素の値を設定し、入力要素がユーザー入力から変更されたときに関連オブジェクトの値を設定します（両方向で機能します）。

 <input rv-value="item.name">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

チェック済み

推測しやすく、設計されています。 値がtrueの場合、checked属性を設定し、値がfalseの場合、checked属性を削除します。 また、チェックボックス要素がユーザー入力から変更されたときに、関連付けられたオブジェクトの値を設定します（両方向で機能します）。

 <input type="checkbox" rv-checked="item.enabled">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

未チェック

属性はrv-checkedの反対です。

 <input type="checkbox" rv-unchecked="item.disabled">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

on- [イベント]

イベントリスナーは、[event]で指定されたイベントと関連オブジェクト（関数を返す必要があります）をコールバックとして使用して、要素にバインドします

注：バインディングの最終値が別の関数に変更されると、このバインダーは自動的に古いコールバックをアンバインドし、新しいイベントリスナーを新しい関数にバインドします。

 <button rv-on-click="item.destroy">Remove</button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

各-[アイテム]

配列の各要素に要素の新しいインスタンスを追加します。 各要素は、配列の現在の反復可能な要素を指す追加のプロパティを含む完全に新しいネストされたビューに関連付けられます。

 <ul> <li rv-each-todo="todos"> <input type="checkbox" rv-checked="todo.done"> { todo.name } </li> <ul>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

PSこのドキュメントに関心がある場合は、「ライブ」の例で補足します。