タグ付けされた質問 「knockout.js」

Knockout.jsは、Model-View-View Model(MVVM)パターンを使用した動的HTML UI用のオープンソースのJavaScriptライブラリです。

4
ko.applyBindingsを呼び出して部分ビューをバインドできますか?
私はKnockoutJSを使用しており、メインビューとビューモデルがあります。ダイアログ(jQuery UIの1つ)に、別の子ビューモデルがバインドされる別のビューをポップアップ表示させたい。 ダイアログコンテンツのHTMLはAJAXを使用して取得されるのでko.applyBindings、リクエストが完了したら呼び出せるようにしたいと思います。また、子ビューモデルを、ダイアログdiv内のajaxを介して読み込まれたHTMLの一部だけにバインドしたいと思います。 これは実際に可能ですか、それともページが最初にロードされてからko.applyBindings一度呼び出されたときにすべてのビューとビューモデルをロードする必要がありますか?
258 ajax  html  knockout.js 

1
Meteor、Ember.js、Backbone.jsの主な違いは何ですか?[閉まっている]
現在のところ、この質問はQ&A形式には適していません。私たちは回答が事実、参考文献、または専門知識によってサポートされることを期待しますが、この質問はおそらく議論、議論、投票、または拡張された議論を誘います。この質問を改善でき、再開できると思われる場合は、ヘルプセンターにアクセスしてください。 8年前に閉鎖。 Ember.js / Backbone.jsの学習は、しばらくの間、やることリストに載っています。Meteorがリリースされた今、Meteor、Ember.js、Backbone.jsの経験を持つ人が、これら3つのJavaScriptフレームワークの主な違いと長所と短所を、経験のない人のために要約できるかどうか疑問に思っています。 具体的には、各フレームワークの方が適しているタスクと、他のフレームワークが適していない理由を知りたいと思います。 編集:Meteorについてもう少し読んだので、Backbone.jsではなくKnockout.jsに似ているようです。したがって、Knockout.jsとの比較も歓迎します。

2
「JSONリクエストはデシリアライズするには大きすぎます」を取得
私はこのエラーを得ています: JSONリクエストが大きすぎて逆シリアル化できません。 これが発生するシナリオは次のとおりです。その国の船積み港のリストを保持する国のクラスがあります public class Country { public int Id { get; set; } public string Name { get; set; } public List<Port> Ports { get; set; } } クライアントサイドでKnockoutJSを使用して、カスケードドロップダウンを作成します。したがって、2つのドロップダウンの配列があります。最初のドロップダウンは国で、2番目のドロップダウンはその国のポートです。 これまでのところすべてが正常に機能しています。これは私のクライアント側スクリプトです。 var k1 = k1 || {}; $(document).ready(function () { k1.MarketInfoItem = function (removeable) { var self = this; self.CountryOfLoadingId …

5
KnockOutJS-単一のビュー内の複数のViewModel
アプリケーションが非常に大きくなり、単一のViewModelで各ビューを処理するには大きすぎると思っています。 したがって、複数のViewModelを作成し、それらすべてを単一のViewにロードするのがどれほど難しいか疑問に思っています。XのViewModelデータをYのViewModelデータに渡すこともできるようにする必要があるので、個々のViewModelが相互に通信できるようにするか、少なくとも相互に認識できる必要があることに注意してください。 たとえば、私は<select>ドロップダウンを持っています、その選択ドロップダウンには選択された状態があり<select>、別のViewModel ....で別のAjax呼び出しにで選択されたアイテムのIDを渡すことができます。 単一のビューで多数のViewModelを処理する上での重要な点は高く評価されています:)

11
KnockoutJSのテンプレートバインディングエラーをデバッグする方法
KnockoutJSテンプレートのデバッグに関する問題が解決しません。 「items」というプロパティにバインドしたいが、テンプレートでタイプミスを作成し、(存在しない)プロパティ「item」にバインドするとします。 Chromeデバッガーを使用すると、次のことがわかります。 "item" is not defined. バインディングの問題に関する詳細情報を取得するのに役立つツール、テクニック、コーディングスタイルはありますか?

2
オブジェクトリテラルvs関数として宣言されたノックアウトビューモデルの違い
ノックアウトjsでは、次のいずれかとして宣言されたビューモデルが表示されます。 var viewModel = { firstname: ko.observable("Bob") }; ko.applyBindings(viewModel ); または: var viewModel = function() { this.firstname= ko.observable("Bob"); }; ko.applyBindings(new viewModel ()); もしあれば、2つの違いは何ですか? 私はknockoutjs googleグループでこの議論を見つけましたが、それは本当に私に満足のいく答えを与えませんでした。 たとえば、いくつかのデータを使用してモデルを初期化したい場合、理由を確認できます。 var viewModel = function(person) { this.firstname= ko.observable(person.firstname); }; var person = ... ; ko.applyBindings(new viewModel(person)); しかし、私がそうしなければ、どのスタイルを選択するかが問題になりますか?

4
フォーカスを失う代わりに、Knockout JSをキープレスでデータバインドする方法を教えてください。
このノックアウトjsの例は機能するため、フィールドを編集してTabキーを押すと、viewmodelデータ、したがってフィールドの下のテキストが更新されます。 このコードを変更して、viewmodelデータがキーを押すたびに更新されるようにするにはどうすればよいですか? <!doctype html> <html> <title>knockout js</title> <head> <script type="text/javascript" src="js/knockout-1.1.1.debug.js"></script> <script type="text/javascript"> window.onload= function() { var viewModel = { firstName : ko.observable("Jim"), lastName : ko.observable("Smith") }; viewModel.fullName = ko.dependentObservable(function () { return viewModel.firstName() + " " + viewModel.lastName(); }); ko.applyBindings(viewModel); } </script> </head> <body> <p>First name: <input data-bind="value: firstName" …

8
ブールViewModelプロパティの否定(「!」)にデータバインドを表示することは可能ですか?
ViewModelのプロパティを使用して、逆の個別の計算されたプロパティを作成せずに、表示するアイコンを切り替えたいと思います。これは可能ですか? <tbody data-bind="foreach: periods"> <tr> <td> <i class="icon-search" data-bind="visible: !charted, click: $parent.pie_it"></i> <i class="icon-remove" data-bind="visible: charted, click: $parent.pie_it"></i> </td> </tr> </tbody> My ViewModelには、次のように月の配列であるプロパティの期間があります。 var month = function() { this.charted = ko.observable(false); };
162 knockout.js 

3
オブザーバブルから自動的にトリガーせずにビューを強制的に更新する方法は?
注:これは主にKnockoutJSをデバッグして理解するためのものです。 (すでにバインドされている)ビューモデルからビューを更新するようにKnockoutに明示的に要求する方法はありますか?私は次のようなものを探しています: ko.refreshView(); これはKnockoutの使用目的ではないことを理解していますが、デバッグや学習のためにそのような方法があるかどうかを知りたいです。
151 knockout.js 

6
KnockoutJSを使用したTypeScript
TypeScriptをKnockoutJSで使用するサンプルはありますか?彼らがどのように連携するのか私はただ興味がありますか? 編集する これが私が持っているもので、うまくいくようです declare var ko: any; declare var $: any; class ViewModel { x = ko.observable(10); y = ko.observable(10); } $(() => { ko.applyBindings(new ViewModel()); }); これにより、次のJavascriptが生成されます。 var ViewModel = (function () { function ViewModel() { this.x = ko.observable(10); this.y = ko.observable(10); } return ViewModel; })(); $(function () { …

12
C#LINQ Selectと同等のJavascript
ここでこの質問に従ってください: チェックボックスのリストでノックアウトでチェック済みバインディングを使用すると、すべてのチェックボックスがチェックされます 配列からの選択を可能にするノックアウトを使用していくつかのチェックボックスを作成しました。上記の投稿から取った作業フィドル: http://jsfiddle.net/NsCXJ/ 果物のIDだけの配列を作成する簡単な方法はありますか? 私はC#に慣れているので、 selectedFruits.select(fruit=>fruit.id); javascript / jqueryで同様のことを行うためのメソッド/既製の関数はありますか?または、最も簡単なオプションは、リストをループして2番目の配列を作成することですか?配列をサーバーにJSONでポストバックするつもりなので、送信されるデータを最小限に抑えようとしています。

13
jQuery UIの日付ピッカー変更イベントがKnockoutJSでキャッチされない
KnockoutJSをjQuery UIで使用しようとしています。日付ピッカーが添付されたinput要素があります。私は現在実行中ですknockout.debug.1.2.1.jsが、変更イベントがKnockoutによってキャッチされていないようです。要素は次のようになります。 <input type="text" class="date" data-bind="value: RedemptionExpiration"/> valueUpdateイベントの種類を変更しようとしても失敗しました。Chrome focusは値を変更する直前にイベントを発生させるようですが、IEは発生させません。 「すべてのバインディングを再バインドする」Knockoutメソッドはありますか?技術的には、値を変更してからサーバーに送信する必要があります。だから私はそのような回避策で生きることができました。 問題は日付ピッカーのせいだと思いますが、これを修正する方法がわかりません。 何か案は?

3
ASP.NET MVC ViewModelでknockout.jsを使用する方法
バウンティ 久しぶりですが、未だにいくつかの未解決の質問があります。バウンティを追加することで、これらの質問に答えられることを願っています。 knockout.jsでHTMLヘルパーをどのように使用しますか 機能させるためにドキュメントの準備が必要だった理由(詳細については、最初の編集を参照してください) ビューモデルでノックアウトマッピングを使用している場合、どのようにすればよいですか?マッピングのため機能が無いので。 function AppViewModel() { // ... leave firstName, lastName, and fullName unchanged here ... this.capitalizeLastName = function() { var currentVal = this.lastName(); // Read the current value this.lastName(currentVal.toUpperCase()); // Write back a modified value }; たとえば、ユーザーがリクエストをキャンセルした場合のように、オブザーバブルをロールバックできるようにしたいプラグインを使用したいのですが、最後の値に戻れるようにしたいのです。私の研究から、これは編集可能のようなプラグインを作っている人々によって達成されているようです マッピングを使用している場合、そのようなものをどのように使用しますか?私はビューマニュアルマッピングにあるメソッドに行きたくありません。インラインMJavaScriptをできるだけ少なくしたいので、各MVC viewModeフィールドをKOモデルフィールドにマップしました。なぜそのマッピングが好きなのか。 この作業を(マッピングを使用して)簡単に行うと、KOの能力が大幅に失われるのではないかと心配していますが、一方で、手動マッピングは多くの作業であり、ビューに多くの情報が含まれ、将来的には維持が難しくなる可能性があります(たとえば、MVCモデルのプロパティを削除した場合、KOビューモデルでも移動する必要があります) 元の投稿 私はasp.net mvc 3を使用していて、かなりクールに見えるのでノックアウトを調べていますが、asp.net mvc、特にビューモデルでどのように機能するかを理解するのに苦労しています。 今私はこのようなことをしています public …

6
Twitterブートストラップオートコンプリートドロップダウン/ Knockoutjsを備えたコンボボックス
ブートストラップオートコンプリートドロップダウンを使用する必要があるという要件がありますが、必要に応じて、ドロップダウンに自由形式のテキストを含めることができます。TypeAheadについて考える前に、Bootstrap TypeAheadテキストボックスを使用できますが、ユーザーが何を検索するのかわからない場合に備えて、いくつかのデフォルト値をヘッドスタートオプションとして指定したいので、ドロップダウンが必要です。 これをMVC DropDownListForで使用しています。これにより、selectコントロールが作成されます。 私はそれをするこの記事を見つけました。 https://github.com/danielfarrell/bootstrap-combobox/pull/20 私がしなければならなかったのは、selectコントロールから名前を削除することだけでした。このコントロールでは、自由形式のテキストを入力できました。これまでのところすべて良い。 現在、これをKnockoutjsと組み合わせて使用​​しています。オプションと選択した値を選択コントロールにバインドし、テンプレートの行をレンダリングして(selector).combobox()を呼び出しました。これにより、選択コントロールがブートストラップコモボボックスになり、入力コントロールが追加され、シーン内の選択コントロールが非表示になります。後ろに。 ここで問題は、サーバーに投稿する値を取得しようとしたときです。入力ボックスに入力した値は、コントロールを選択するために指定したオプションからの有効なオプションではないため、デフォルトで常に最初のオプションに設定されます。これは、bootstrap-combobox.jsによって作成された入力ボックスではなく、選択したコントロールで選択した値のバインディングを設定するためです。 私の質問は、選択コントロールがバインドされているのと同じポーパーティに入力ボックスをデータバインドする方法です。 他のオプション?? さらに説明が必要な場合や質問がある場合はお知らせください。提案してください。 ありがとう。

2
いつko.utils.unwrapObservableを使用するのですか?
KnockoutJSを使用していくつかのカスタムバインディングを記述しました。ko.utils.unwrapObservable(item)コードを見て、いつ使用するかはまだわかりませんitemが、その呼び出しは基本的に、監視可能かどうかを確認します。ある場合はvalue()を返し、ない場合は値を返します。カスタムバインディングの作成に関するKnockoutのセクションを見ると、次の構文があります。 var value = valueAccessor(), allBindings = allBindingsAccessor(); var valueUnwrapped = ko.utils.unwrapObservable(value); この場合、それらはを介してオブザーバブルを()呼び出しko.utils.unwrapObservableますが、も呼び出します。どちらを使用するか、またはどちらを使用するか、または常に上記のパターンに従って両方を使用する必要があるかどうかを把握しようとしています。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.