Knockout : Home
Simplify dynamic JavaScript UIs with the Model-View-View Model (MVVM) pattern Declarative Bindings Easily associate DOM elements with model data using a concise, readable syntax Automatic UI Refresh When your data model's state changes, your UI updates automatically Dependency Tracking Implicitly set up chains of relationships between model data, to transform and combine it Templating Quickly gene
Knockout.jsの概要 | Adobe Developer Connection
Knockout.jsは、モデルデータに対して宣言によって要素をバインドできるようにするJavaScriptライブラリです。このモデルデータでは、UIとモデルの間で自動的に双方向の更新が行われます。Knockoutは簡単に使い始めることができ、他のライブラリやテクノロジーとも密接に統合されています。ここでは、使い始める際に知っておく必要があることについて説明します。 複雑で動的なデータ駆動型のWebアプリケーションを開発することは、難しい作業になる可能性があります。ユーザーインターフェイスとその基になるデータとを常に同期させるには、通常、ユーザーが何かアクションを実行するたびに、または新しいデータが読み込まれるたびに、様々な要素とデータとの間で情報を仲介する多くのイベントハンドラーを作成する必要があります。 Knockoutの登場以前 Knockoutのメリットを示す簡単な方法として、Kn
Backbone.js と比較しながら Knockout.js を試してみた - present
Backbone.js を試したから Knockout.js にも挑戦 JavaScript のクライアント MVC フレームワークは Backbone.js でいこうと思っていたんですが、Knockout.js が Ver 2.0 でかなり機能追加されて、ちょっと心変わり。もともと Knockout.js のデータバインディング機能に興味を持っていたところに、テンプレート機能が追加されて、試してみたくなりました。 念のため説明すると、Knockout.js は、.NET 開発者にはお馴染みの、データバインディングや MVVM パターンが特徴のフレームワークです。 Knockout : Home ちなみに、Backbone.js の記事はこちら。 作って覚える Backbone.js - present 作って覚える Backbone.js (2) Router 編 - present T
『knockout.jsでさくさくWebアプリ開発』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！ スマホ対応アメーバピグ Webアプリ版の開発を担当している吉川浩太と申します。 knockout.js」の機能と特徴を、簡単にご紹介できればと思います。 knockout.js？knockout.js (http://knockoutjs.com/) knockout.jsはMVVM（Model-View-ViewModel）パターンのフレームワークです。 双方向データバインディングやアイテムテンプレート等の機能があり、SilverlightやWPF開発者にはかなりとっつきやすいフレームワークだと思います。 WebアプリではDOMを動
js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記
js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('click', function () { // update 処理 }) でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っている
クライアントサイドで動くJavaScript Template Engine７つ｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
項目説明： delimiter – テンプレートを書く際の区切り文字 ({{}} や <%%>) が変更できる。 logic-less – テンプレート上で演算や複雑な制御構文が書けない仕様により、ロジックとテンプレートが完全に分離される。 precompile – テンプレートを事前に実行可能な JavaScript のコードにコンパイルできる。 escape – テンプレートエンジンで自動的に HTML エスケープができる。 method – テンプレート上からデータとして与えられたメソッドを呼び出し、結果を挿入することができる。 standalone – テンプレートエンジンが別途ライブラリを必要とせず単独で動く。 partials – 部分的に別のテンプレートファイルを組み込むことができる。 (include のようなもの) 上の表で表現しきれないそれぞれのテンプレートエンジンの特
jasmine-headless-webkit -- The fastest way to run your Jasmine specs!
Jasmine Headless WebKit Run your Jasmine specs at sonic boom speed! Jasmine is great. I love it. But running Jasmine when you need to test code that will run in a browser environment can be problematic and slow: The Jasmine gem's server makes getting up and testing very fast, but F5-ing your browser for each test run is distracting. Jasmine CI uses Selenium, which speeds up the process a bit, but
スマートフォン実機デバッグ: JSConsoleを使ってみる
と入力してみましょう。 そうするとサーバでIDが自動的に割り振られ、挿入用のスクリプトタグが出てきます（上の画面で反転している部分です）。このスクリプトタグを、スマートフォンで読み込ませるHTMLに組み込んでみましょう。 <!DOCTYPE html> <html><head><title>JSConsole Test</title> <script> window.test = function(arg) { console.log("test message:" + arg); }; </script> </head> <body><div id="hello">hello world</div></body> <script src="http://jsconsole.com/remote.js?9D22144E-AFD1-428B-B505-1D6A4C6F7324"></scri
Ajax ページを Google 検索エンジンに知らせる方法 - ShobonEngineの日記
Google の検索エンジン（クローラ）は、Ajax ページのコンテンツを動的に取得できないため、開発者が別途、検索エンジン用のページを作ってやる必要があります。 ハッシュフラグメント #! で検索エンジンに知らせる場合 Ajax ページはしばしば、ハッシュ値 # で一意な URI を提供してきました。 Google 検索エンジンは、#! で指定された URI を Ajax ページと判断します。 そして、#! を ?_escaped_fragment_= に置換してアクセスして来ます。 したがって、#! の URI は人間向けのページ、?_escaped_fragment_= の URI は検索エンジン向けのページとしてコンテンツを用意してやればいいことになります（従来の # は廃止する）。 検索エンジン向けのページは、JavaScript を無効にしてもコンテンツを閲覧できるよう、サーバ
jQueryでiframe内のページから親ページを操作する方法｜BLACKFLAG
少し前に「jQueryでiframeの親ページからインラインフレーム内の子ページを操作する方法」と題して、 iframeの親ページから子ページを操作する方法を紹介しましたが、 その逆の、iframeの子ページから親ページを操作をする方法について 簡単なサンプルを交えて紹介してみます。 親ページ側では特にjQueryファイル自体を読み込む必要は無く、 iframe内に表示するページ側で、jQueryファイルと共に 下記の様なスクリプトを書くことで操作することが可能になります。 ◆SCRIPT $(function(){ $('p',parent.document).css({color:'#ff0000'}); }); この記述方法（参考例）の場合だと、iframe内のページからの操作で 親ページの＜p＞タグのテキスト色を「赤」に変更します。 スクリプトを実行させる該当要素の後に「,pare
%25E9%2596%25A2%25E9%2580%25A3)
JavaScript インラインフレーム(iframe)関連 - とみぞーノート
いろいろハマリがちなJavaScriptでインラインフレームを扱う場合のメモ。 特に断らない限りブラウザのバージョンは以下が前提。 iframeのwindow,documentの取得方法はIEとMozilla系(NN,FireFox)で異なる。 IEはframes配列のwindow,documentプロパティから取得できる。Mozilla系はiframeエレメントのcontentWindow,contentDocumentプロパティから取得できる。 IEでもMozilla系と同じくiframeエレメントのプロパティから取得することもできるが、contentDocumentについてはIEには存在しないので、documentはcontentWindow.documentとしてcontentWindow経由で取得しなければならない。 (1) frames配列から取得する場合 frames['xx
IEでのJavaScriptのデバッグ方法 - Microsoft Script Editor編 - - 日向夏特殊応援部隊
IEでJSのエラーになったときに立ち上がるデバッガって大体の人が使いこなせてないのではないでしょうか？ ちなみに僕もそうだったのですが、ふと思い立って調べてみました。 追記 (2008-01-10T14:24:30+09:00) はてブのコメントで、 MS Office持ってない人はVisual Web Developer(VWD)で。/ちょっと前にこんなの書いたので、VWD 2008使う人は参考にしてもらえると幸い。 http://d.hatena.ne.jp/terurou/20071218/119796573 とありました。 これはid:kaorunさんにも聞いていたので後で試そう〜と思ってたので助かります。 合わせてご覧になって下さい。 Microsoft Script Editorとは？ のようにOffice付属のツールだったりします。僕の環境では、 C:\Program Fil
Kanasan.JS JavaScript 第5版読書会 #2 雑感 - blanket log
やはり能動的な目的(本を読む!)があるというのは良いもので、人の話聞いてるだけの勉強会よりずっと充実した一日に思えました。議論は絶えないしそれを眺めているだけでも楽しかった。 サイ本は2年くらい前にざっと通読した程度ですが、当時はちゃんと分かってなかった部分も多かったので復習を兼ねて参加しました。コアの部分はそれほど変わっていませんが、結構忘れていたこと多かったですし言語仕様の細かいところをちゃんと抑える良い機会になりました。 あと、いろんな人とお話できたのが良かったです。勉強会後の懇親会の方がむしろ面白い話を聞けたかもしれない。id:amachangは、すごく実直な方だなぁと思った。 40人を越える大所帯となると、仕切る側がとても大変そうでした。運営陣の皆様、本当にありがとうございました。 おそらく次回が山場になる(関数とかプロトタイプとか)と思うので、今から非常に楽しみです。 prot
prototype と __proto__ と constructor, Property Accessor とメソッド呼び出し, JavaScript における mix-in - ema log(2008-01-21)
_ [JavaScript] prototype と __proto__ と constructor いまいち働いてない頭であれこれ考えて、手を動かしてみた。こんなことばっかりやっててすみません。ここ一週間ほどのまとめです。 「Kanasan.JS JavaScript 第5版読書会 #2 雑感」 [blanket sky] に同様の内容が書かれていますが、うちより断然まとまってました。 まとめると constructor: 初期化に使われた関数（オブジェクト）（であることが期待される、ぐらい？） prototype: 拡張するためのオブジェクト（コンストラクタで初期化されたオブジェクトに対して） __proto__: プロトタイプオブジェクト（プロパティが見つからなかったときに探索しに行くオブジェクト） の様になります。色々な人が苦しんでるんだろうなぁ。 prototype と __pr
jQuery Easing Plugin | エフェクト動作パターン集プラグイン
jQuery Easing Plugin は、jQuery のエフェクト動作パターン集のようなプラグイン。jQuery にも、linear と swing のシンプルな動作パターン（ easing ）は用意されているが、jQuery Easing Plugin を導入すると、30種類以上もの、変化に富んだ動作パターンを使えるようになる。 エフェクト動作パターンは、animate などで使うことが多い。（参照：animate の動作パターンの指定方法） 導入 jQuery Easing Pluginより、jquery.easing.1.3.js を、ダウンロード。「 jquery.easing.1.3.js 」ファイルを、自分のサイトのサーバーにアップロード。 使用したいページで、下記のようにして読み込む。「 jquery.easing.1.3.js 」ファイルへのパスは、アップロードした場
jQuery Easing Plugin
Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). All done with a straight animate call, no need to specify the animation type at all. Select easing types for the demo first one for down, second one for up. Then click the clicker. Updates 12/11/07 1.3 jQuery easing now supports a de
jQuery Easing - jQuery 日本語リファレンス
Easing/jQuery easingとは、エフェクトの動きを加速/減速させるための関数です。 例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。 しかし、ここでeaseInQuadの動きを適用すると、変化量は線形ではなく2次関数の曲線になります。（下記サンプル参照） そのため、最初はゆっくりと薄くなっていき、後半に急激に消えていくような効果が得られます。 特別なことをしなくても使うことの出来るeasingは"linear"と"swing"の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1.3時点で32パターンが提供されています。 これ以外にもeasingは比較的容易に自作するこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jquery/jquery-mousewheel: A jQuery plugin that adds cross-browser mouse wheel support.
jsconsole
link_to method and click event in Rails
