Knockout.js

Knockout.js

最終更新:2019/01/02

トップページへ戻る
        
●Visual Studio 2015/2017 - TypeScriptの新しいバージョン(2.6から発生する)でknockout.jsがビルドエラーになる件

    ・2.5より新しいバージョンだとエラーが出る。2.5に変更したらビルドエラーでない
     ・エラーを無視する方法
      ・プロジェクトの「.csproj」に設定する方法
       ・エディタで開いて「True」を追加してビルドしたらエラー出ない
      ・プロジェクトの「.csproj」を編集しないでtsconfig.jsonを追加して設定する方法
       ・プロジェクトにtsconfig.jsonを追加して「"skipLibCheck": true // すべての型定義ファイル(*.d.ts)の型チェックをスキップする」を追加したらエラー出ない
    typescript compiler bug? knockout.validation.d.ts doesn't compile anymore

●ドキュメントなど

    公式サイト

    日本語ドキュメント -非公式翻訳サイト-

    Knock Me Out

    Knockout.js Succinctly -無料e-book-

●Knockout.js - slideshare / speakerdeck -

    20140712 knockoutjs-hands-on-in-osaka

    Knockout handson

    KnockoutJSを使用したアプリケーションの構築例

    Knockout bindings 

    KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い

    Knockout.js を利用したインタラクティブ web アプリケーション開発 

    Knockout を用いた大規模 JavaScript 開発 

    TypeScriptでKnockoutを書いてみた 

●概要

    MVC(MVVM) JS フレームワークの中でKnockoutJsを選んだ理由

    KnockoutJSの長所/短所とAngularJSとの比較

    angular・backbone・knockoutの比較/印象まとめ

    ASP.NET SignalRとknockout.jsで実現する次世代Webアプリ

    [Knockout]MVVMパターンでアプリケーションを構築する

    KNOCKOUT.JSの概要

    knockout.jsでMVVMを実装 その1

    MVVMフレームワーク「Knockout.js」が超絶便利!!その概要と使いどころなどについて

    新・三大JavaScriptフレームワークの実践(Backbone.js Knockout.js Angular.js)
 
    チュートリアルレベルをさらっと触ってみた感想

●入門

    KnockoutJS Tutorial

    knockout.jsのチュートリアルをやってみた

    knockout.jsでさくさくWebアプリ開発

    Knockout.jsを入門してみた 

    [Knockout.js基本編]最低限の構成で「Hello World」してみる

    knockout.jsチュートリアル自分用メモ

    knockout.js入門

●Knockout.js のベストな使い方【決定版】

    Knockout.js のベストな使い方【決定版】

    Knockout.js @GitHub

    Knockout.jsのマイ運用方針

    Knockout.js @GitHub - データバインド(ソース)

    Knockout.js @GitHub - データバインド

    Knockout.js @GitHub - フロー制御(ソース)

    Knockout.js @GitHub - フロー制御

    Knockout.js @GitHub - カスタムバインド(ソース)

    Knockout.js @GitHub - カスタムバインド

●サンプル(CodePen)

    Table detailed rows - Buefy example

    Knockout lists

    Form Validation UX in HTML, CSS and Knockout

    table

    Mini Customizer Knockout.js

    KOJS tutorial2 for myself

    KOJS tutorial1 for myself

    Binding data in Knockout.js

    Knockout1

    Binding data in Knockout.js

    Widget

    Knockout1

●配列のアイテムを実際には削除せず、「削除済み」としてマークすることで論理削除(_destroy プロパティ)

    クライアント側で削除したデータを、サーバーが知る一つの方法は、 真(true)の値を持った _destroy プロパティを 
    対象のインスタンスに加えることです。 

    サンプル

    KnockoutJs Tutorial|ajaxでの送信と受信

    Knockout.js チュートリアルのメモ:Loading and saving data 

    KnockoutJs 1.3 beta. _destroy:false has same result on ui as _destroy:true

    Adding additional data to object in Knockout.js

    Using knockout destroy() with django deserializer

●フォーマット

    Knockout.js形式の日付項目

    Knockout.js format date item

●サンプル

    サンプル1

    サンプル2(データの読み込みと保存)

    サンプル3(テンプレート)

    knockout.js data-bindで使われるバインディング(valueやtextなど)

    knockout.js 表をソートしたい

    knockout.js observableとobservableArray

    knockout.js クリックされた行をinputタグに置き換える

    knockout.js clickバインディングとaタグ

    ASP.NET MVCとknockout.jsの連携:引数を渡してJSONを取得

    ASP.NET MVCとknockout.jsの連携:データをJSONで渡す

    ASP.NET MVCとknockout.jsの連携:データをJSONで渡す2

    knockout.js SPAでURL指定でアクセスできるようにする

    knockout.js クリックしたデータをレイアウトを変えて表示

    knockout.js データの読込み、表示

    knockout.js データのリスト表示

    knockout.js データの件数で処理を変える

    knockout.js 表示したデータを削除

    knockout.js 表示したデータを編集可能にする

    knockout.js ボタンクリックで表示のデータ追加

    knockout.js データ群をforeachで出力

    knockout.js ボタンクリックで大文字に変換

    knockout.js inputに入力した文字を反映

    knockout.js 入門・初心者向け情報を見る前の基本
    
    キャレット位置をバインド&キャレット位置に文字列を挿入「caret binding」

    Knockout.js勉強中! サンプルアプリ『電卓』

●aタグ

    KnockoutJsのdata-bindとaタグについて

    [knockout.js] KnockoutJSのHrefとmailtoリンク

●バリデーション

  Native Validation Rulesは、Required、Min、MinLength、MaxLength、Email
    Knockout-Validation

    Observable を拡張する

    いまさらながらKnockoutJSに入門してみた - フォームバリデーション

    knockout.jsで入力チェック

    Knockout Validation

    Validation Form With Knockout.JS

    Client Side Validation with Knockout.JS

    Knockout.js Validations With and Without a Plugin

    Knockoutjs Validation for areSame or mustMatch examples

    [javascript] ko.validation.groupの使い方

    Knockout JS validations

    Validations in knockout js

    Validate and Restrict Input through Custom Data Bindings in KnockoutJS

    Knockout JS Validations, Without a Plugin and Using a Plugin

    Using required Knockout js to validate a credit card form

    knockout.js入門編「WordPressのフォームプラグインにリアルタイムバリデーションを実装する」

●select

    Knockout.jsで動的なselectのデフォルト値を設定する

    Knockout.jsでセレクトボックスを作る

●checked

    【knockout.js】チェックボックスをビットフィールドにバインド【bitField-binding】

    knockoutjs:Example 2: checked=checkedで表示・非表示:The checked binding

    The "checked" binding

    "checked" バインディング

    Knockout.jsでチェックボックスを攻める

    【Javascript】Knockout.jsでclickバインディングを使うとcheckedバインディングが機能しなくなる!!

    「チェックされた」バインディング

    Checked Binding Using Knockout in ASP.Net Application

    how to bind true/false value to checkbox with ASP.NET MVC and Knockout JS

    Creating Dynamic checkboxes with knockout.js

    koGrid: Bug ? Checkboxes column duplication

    Creating Dynamic checkboxes with knockout.js

    Single-page Application with Knockout.js, Part 4

    Binding Checkboxes with KnockoutJS

    (Un)Check All using #KnockoutJS

    Knockout.js “select all” checkboxes

    Check All

    Knockoutの小技集 〜チェックボックスの全選択ON/OFF〜 

    Knockout.js Check All

    A simple group checkbox for Knockout.js

    (Un)Check All using #KnockoutJS

    Knockout.js check/uncheck all checkboxes using header checkbox

    KnockoutJS - checked Binding

    Select/Deselect All Checkboxes 

    A Smarter `checked` Binding for KnockoutJS 

    Magento2 : checkbox change function in knockout js

    The Mistake Everyone Makes with KnockoutJS

    [javascript] knockoutjsのチェックボックスのリストを使って作業する

    Magento custom Knockout.js bindings

    How to put multiple checkboxes into an observable array 

    knockout js button click select all the checkbox

    knockoutjs:Example 1: checked=checkedにする:The checked binding

    KnockoutJS Select Unselect all Checkbox list

    knockout check/uncheck all combo box

●繰り返し

    Knockout break foreach loop

    How can I break or continue knockout's arrayforeach?

    How to break this loop

    Knockout.js pro tips – working with observable arrays

    Knockout.jsのforeachで少しハマったのでメモ

●条件式

    knockout.js ifバインディングでelseを使いたい

    Knockout.js の if, ifnot, visible バインディングが View に反映されるまで要素を非表示にする

    knockoutJSのifバインディングの罠

    Knockoutを使ってみた - 条件式を使って表示内容を切り替える

    【Knockout.js】ifバインディングを使ってみる

    "if"バインディング

●注意

    【Javascript】Knockout.jsでclickバインディングを使うとcheckedバインディングが機能しなくなる!!【初心者向け】

    自分がプロジェクトでKnockoutを使うときに気をつけていること

●プラグイン

    KnockoutJS の便利なプラグイン

    knockout.mapping
    
    knockoutとMappingプラグインとlocalStorageは相性がいいかも

    Knockout.js の Mapping プラグインを使ったら凄く捗った件

    knockout-validationでBootstrapのform-groupにhas-errorを付ける

    ko.editables

    knockout.observableDictionary

    knockout-sortable

    knockout-else

    knockout-switch-case

    ko-jQueryVisualState

    Knockout ES5 でより自然な書き方へ

    Knockout ES5 に対応したカスタムバインディングを書く作法

    Knockout.Punches

    Knockout-Kendo.js

    ko.datepicker

    bootstrap-slider-knockout-binding

●TypeScript

    TypeScriptでKnockout!!

    TypeScriptのクラスでKnockout.jsのViewModelを書くとき、foreach内でのclickバインディングでthisを参照できない問題とその解決方法いろいろ
     
    TypeScriptでknockout.jsを使う・その1~準備~ 

    TypeScriptでknockout.jsを使う・その2~基本的な使い方~ 

    TypeScriptでknockout.jsを使う・その3~各種イベント発生時のバインディング~ 

    TypeScriptでknockout.jsを使う・その4~コールバック関数内のthisの罠~ 

    Visual Studio と TypeScript、Knockout.js、Linq.js を使って、MVVM してみよう!

    Visual Studio + TypeScript + ASP.NET MVC5 + knockout でのソリューション構成のプラクティス

    knockout.jsでバインディング・コンテキストの値をデバッガで確認する方法

    knockout.jsを使ってプログレスバーを作ってみた 

    Knockout.jsで複数選択可能なテーブル 

    Knockout.jsで、要素を選択できるテーブル 

●ページング

    ページング機能付きの表

    knockout.js を使ってページングを実装してみる 

    KnockoutJSを使って、カラムでソート実装する

    knockout.jsを利用したMVVMによるコンポーネント作成。WebGridの基本的な使い方と、Pagerヘルパーの利用。

    Create grid with knockoutjs

●使い方

    Knockout.js 使い方メモ

    knockout.js よく使うbindingのパターン

    javascriptのknockout.jsのsimpleGridのヘッダーの非表示方法やセルの背景色の色、セルの境界線の非表示方法を教えてください。

    Knockout.js で jQuery UI ‘sortable’を使う

    KnockoutをTDDで学ぶ環境作り

    knockout-validationでBootstrapのform-groupにhas-errorを付ける

    Simple KnockoutJS Paging With Datatables

    Grid With Paging Using KnockoutJS

    Sorting Paging a Grid using Knockout JS and ASP.NET Web API Data Service

    Data-grid using Knockout JS with paging and sorting
    
    [Knockout.js] ko.editables で ViewModel をロールバック/コミットしてみる

    KnockoutJS Advent Calendar 2014
    
    [Knockout.js基本編]ko.observableメソッドでプロパティの変化をリアルタイムでDOMに反映させる

    [Knockout.js基本編]Viewから参照できるのはViewModelオブジェクトとグローバルスコープのみ(っぽい)

    KnockoutでサクっとWebサービスを作ろう

    [javascript] knockoutjsで動作するように動的に挿入されたHTMLを取得する

    [twitter-bootstrap] ブートストラップのツールチップがノックアウトバインディングで動作しないのですか? (wフィドル)

    サンプルに惑わされるな!KnockoutでUIエフェクトを使う際のベター・プラクティス

    KnockoutでシーケンシャルなjQueryアニメーション

    Knockout.js 3.2の新機能Componentsを一足先に使う

●Visual Studio

    TypeScripted Knockout in ASP.NET MVC

    Knockout.js で足し算アプリ (Visual Studio2013)

    Knockout.js でTodoアプリ (Visual Studio2013)

    TypeScript+KnockoutJSアプリ (Visual Studio2013)

    Knockout.js の依存の更新タイミングと rateLimit

    Visual Studio 2013 の Single Page Application (SPA) テンプレートを使った開発 (Knockout.js)

    Knockout.js で Multiple View (Partial View) をエレガントに切り替える方法

    CRUD in ASP.NET MVC 4 with KnockOut.JS

    Introduction to Knockout.js and CRUD Operations in ASP.Net Web Forms Using Knockout.JS

    Jumpstart KnockoutJS with ASP.NET MVC/Web Api

    Complete End to End CRUD Operations Using Knockout.JS and EntityFramework 5 in MVC4 Application

    Developing, Architecting and Testing Web Applications with MVC 5, Web API 2, KnockoutJS, Ninject and NUnit

    Knockout CRUD Operations using ASP.NET MVC

    Web API CRUD Operations with Knockout

    MVC CRUD Actions Using KnockoutJS

    Getting Started with KnockoutJS in ASP.NET MVC


●調査中

    ASP.net core install knockout issue

    asp.net core 2.1 with knockout

    DefinitelyTyped

    Razor Pages, TypeScript and Knockout

    TypeScript version of Knockout Web Mail Tutorial

●Advent Calendar

    Knockout.js を TypeScript で書いてみる

    初めてのTypeScript (3) - knockout.jsを利用してみる

    KnockoutJSの長所/短所とAngularJSとの比較

    KnockoutJSの紹介

    selectExtensionsを使ってみる

    Components を使ってみる

    RICOH THETA 専用カスタムバインディングを作った話

    ko.computedとko.pureComputed

    Rails x CoffeeScript x KnockoutJSでWebサービス作った

    ko.utils(配列編)

    ko.utils(その他)

    [Knockout.js] ko.editables で ViewModel をロールバック/コミットしてみる

    ko.utils(その他)その2

    KO + TypeScript で大規模 SPA 開発

    Yeomanを使ってKnockoutのプロジェクトを作成する

    KnowkoutJSでTrelloライクなWebアプリを作る

    カスタムバインディングの作り方

    Knockoutの template バインディング

    Mappingプラグイン(その1)

    キャレット位置をバインド&キャレット位置に文字列を挿入「caret binding」

    Mappingプラグイン(その2)

    KnockoutJS公式チュートリアルで学べる内容まとめ

    Custom Component Loaders で外部のテンプレートファイルを読み込んでみる

    KnockoutでHandlebarsを使ってみる

    KnockoutHxを使って小規模SPA

    自分がプロジェクトでKnockoutを使うときに気をつけていること

    KO + TypeScript + Cordova でハイブリッドアプリ開発

    knockoutの基礎知識

    knockoutでのViewModelの書き方

    knockoutでのList(配列)処理

    knockoutのbinding

    knockoutのcustom-binding

    knockoutと既存UIライブラリの連携

    knockoutのcomputed property

    knockoutのscope(context)

    knockoutのデバッグ方法

    knockoutのsubscribe

    [小ネタ] knockout.jsでラジオボタンのモデルの値に真偽値を使う

    [小ネタ] knockout.jsのattrバインディングでreadonly属性を設定する

    【knockout.js】knockout.jsのMappingプラグインで変更のあったデータを点滅させる方法

●しばやん雑記

    Knockout.js の paging extender を使ってページングを実装する

    Knockout.js 3.2.0 がリリースされたので新機能について一通り調べてみた

    Knockout.js と ASP.NET MVC の組み合わせ時にモデルバインディングが腐る件

    Knockout.js の if と visible は似ているようで違うので注意

    Knockout.js の Mapping プラグインを使ったら凄く捗った件

    knockout.js 2.3.0 と 3.0.0 ベータがリリースされていました

    インテリセンスの新しい knockout.js サポート

    knockout.js の最近の動向

    knockout.js 2.1.0 がリリースされました

    knockout.js でカスタムバインディングを作成する

    knockout.js の注意すべき点

    knockout.js でテンプレートを動的に切り替える

    knockout.js 2.0.0 がリリースされたので試してみた

    knockout.js の基本と 1.3.0 の新機能

    ASP.NET MVC 4 で knockout.js を活用する

●Allied ArchitectsEngineer Blog

    Knockout.js入門

    Knockout.js入門 その2

    KnockoutJSを使って、カラムでソート実装する

    Knockout.jsでフォト蔵APIを使って写真一覧とボタンによるページ追加を作ってみる

●Knockoutの小技集

    Knockoutの小技集 〜チェックボックスの全選択ON/OFF〜

    Knockoutの小技集 〜左右二つのリストで移動可能なセレクトボックス(1)〜 

    Knockoutの小技集 〜左右二つのリストで移動可能なセレクトボックス(2)〜 

    CoffeeScriptとKnockout.jsのサンプル 

●完敗だぜ!Knockoutでノックアウト

    完敗だぜ!Knockoutでノックアウト – 導入編

    完敗だぜ!knockoutでノックアウト – Todoアプリ編1

    完敗だぜ!knockoutでノックアウト – Todoアプリ編2

    完敗だぜ!knockoutでノックアウト – Todoアプリ編3

    完敗だぜ!knockoutでノックアウト – Observable編

    完敗だぜ!knockoutでノックアウト – Observable編2

    完敗だぜ!knockoutでノックアウト – バインディング編

●.Net MVC4 で KnockoutJS

    JSフレームワーク】 knockout.js を使った変更検知(ダーティ・チェック)を考える [1] 

    【JSフレームワーク】 knockout.js を使った変更検知(ダーティ・チェック)を考える [2]

    .Net MVC4 で KnockoutJS ~【応用編1】BootstrapモーダルをKnockoutから呼び出す(カスタムバインディング) 

    .Net MVC4 で KnockoutJS ~【応用編3】WebAPIでセーブするための準備とか 

    .Net MVC4 で KnockoutJS ~【応用編4】Knockoutの多層オブジェクトをWebAPIで一気にセーブ 

    .Net MVC4 で KnockoutJS ~【応用編2】モーダルからビューモデルにデータを追加してみる 

    .Net MVC4 で KnockoutJS ~【基礎編4】成績表を作ってみよう Part2 

    .Net MVC4 で KnockoutJS ~【基礎編3】成績表を作ってみよう(Bootstrapでデザインも!)Part1 

    .Net MVC4 で KnockoutJS ~【基礎編2】 WebAPIで取得したデータをビューに表示(初めてのObservableArray) 

    .Net MVC4 で KnockoutJS ~ 【基礎編1】Knockoutのキホン、ViewModelとBinding 

    そろそろKnockoutJSばどげんかせんと。。。 

●モーダル

    knockout.jsでajaxでAPI叩いてモーダル表示分け 

    Bootstrap3のmodalをknockout.jsと連携させて表示する

    Twitter Bootstrap Modals and Knockout.js

    Twitter bootstrap 3 Modal with knockout

    Knockout Bootstrap Modal Binding

    bootstrapShowModal.js 

    Knockstrap

    Knockout Bootstrap Modal Binding

    Creating Custom Knockout Bindings

    knockout.js/bootstrap binding to a bootstrap modal 

    Single-page Application with Knockout.js, Part 2

    [twitter-bootstrap-3] Twitter bootstrap 3 Modal with knockout 

●未整理

    knockoutjsハンズオン勉強会 – 2014/05/17 – Microsoft 品川

    まとめ:KnockoutJS

    knockoutjs勉強会 – 2014/06/24 – Microsoft 品川


トップページへ戻る
Copyright© 2005- Naoyuki Sano. All rights reserved.