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

ユーザーが複数回実行できるWebページに機能を構築しています。ユーザーのアクションを通じて、ko.applyBindings（）を使用してオブジェクト/モデルが作成され、HTMLに適用されます。 データバインドされたHTMLは、jQueryテンプレートを介して作成されます。 ここまでは順調ですね。 2番目のオブジェクト/モデルを作成してこの手順を繰り返し、ko.applyBindings（）を呼び出すと、2つの問題が発生します。 マークアップには、以前のオブジェクト/モデルと新しいオブジェクト/モデルが表示されます。 オブジェクト/モデルのプロパティの1つに関連するjavascriptエラーが発生しますが、マークアップではレンダリングされます。 この問題を回避するには、最初のパスの後でjQueryの.empty（）を呼び出して、すべてのデータバインド属性を含むテンプレート化されたHTMLを削除し、DOMに存在しないようにします。ユーザーが2番目のパスのプロセスを開始すると、データにバインドされたHTMLがDOMに再度追加されます。 しかし、私が言ったように、HTMLがDOMに再度追加され、新しいオブジェクト/モデルに再バインドされると、最初のオブジェクト/モデルからのデータがまだ含まれ、まだ発生しないJSエラーが発生します最初のパスの間。 結論は、マークアップがDOMから削除されていても、Knockoutがこれらのバインドされたプロパティを保持していることです。 したがって、私が探しているのは、これらのバインドされたプロパティをKnockoutから削除する方法です。観測可能なモデルがなくなったことをノックアウトに伝えます。これを行う方法はありますか？ 編集 基本的なプロセスは、ユーザーがファイルをアップロードすることです。次にサーバーはJSONオブジェクトで応答し、データにバインドされたHTMLがDOMに追加されます。次に、JSONオブジェクトモデルがこのHTMLにバインドされます。 mn.AccountCreationModel = new AccountViewModel(jsonData.Account); ko.applyBindings(mn.AccountCreationModel); ユーザーがモデルでいくつかの選択を行うと、同じオブジェクトがサーバーにポストバックされ、データバインドされたHTMLがDOMから削除され、次のJSを取得します mn.AccountCreationModel = null; ユーザーがもう一度これを実行する場合は、これらのすべてのステップが繰り返されます。 私はコードがjsFiddleデモを行うにはあまりにも「関与」していると思います。

113 javascript  knockout.js 

push新しいアイテムをに追加したいのobservableArrayですが、そのアイテムがまだ存在しない場合のみです。KnockoutJSでこれを達成するための「検索」機能または推奨パターンはありますか？ 私が気づいたremoveの関数がobservableArray条件に渡すための機能を受け取ることができます。私はほとんど同じ機能を望んでいますが、渡された条件が真であるか真でない場合にのみそれをプッシュします。

103 knockout.js 

私はこのノックアウトコードを持っています： function Task(data) { this.title = ko.observable(data.title); this.isDone = ko.observable(data.isDone); } function TaskListViewModel() { // Data var self = this; self.tasks = ko.observableArray([]); self.newTaskText = ko.observable(); self.incompleteTasks = ko.computed(function() { return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() }); }); // Operations self.addTask = function() { self.tasks.push(new Task({ title: this.newTaskText() })); self.newTaskText(""); …

99 javascript  knockout.js 

KnockoutJSバージョン2.0.0 を使用しています オブジェクトのすべてのプロパティをループしている場合、各プロパティがko.observable？これが私がこれまでに試したことです： var vm = { prop: ko.observable(''), arr: ko.observableArray([]), func: ko.computed(function(){ return this.prop + " computed"; }, vm) }; for (var key in vm) { console.log(key, vm[key].constructor === ko.observable, vm[key] instanceof ko.observable); } しかし、これまでのところすべてが間違っています。

98 javascript  knockout.js 

私は常にこのイディオムをKOベースのHTMLテンプレートで使用していることに気づきました。 <!-- ko if: isEdit --> <td><input type="text" name="email" data-bind="value: email" /></td> <!-- /ko --> <!-- ko ifnot: isEdit --> <td data-bind="text: email"></td> <!-- /ko --> KOで条件付きを行うためのより良い/よりきれいな方法はありますか、またはより良いアプローチがありますか従来のif-else構文を使用よりもますか？ また、一部のバージョンのInternet Explorer（IE 8/9）が上記の例を正しく解析しないことも指摘しておきます。詳細については、このSOの質問を参照してください。簡単にまとめると、IEをサポートするためにテーブルタグ内でコメント（仮想バインディング）を使用しないでください。tbody代わりに使用してください： <tbody data-bind="if: display"><tr><td>hello</td></tr></tbody>

95 javascript  knockout.js 

1つの要素に複数のデータバインディングが必要です。たとえば、1つのタグにデータバインディングhrefだけでなくも必要です。私はこれを試しました、html a <a data-bind="html: name" data-bind="attr: { href: url }" data-bind="attr: { 'data-prop': xyz }"> </a> しかし、これは機能しません。ノックアウトは1つの data-bindプロパティのバインドのみをサポートしているようですか？1つの要素hrefに、内部html、およびカスタム " data-prop"属性の両方をバインドする方法は？

94 javascript  jquery  knockout.js 

私はhtml / cssとJavaScriptだけから作成されたモバイルアプリを構築したいと考えています。JavaScriptを使用してWebアプリを構築する方法についてはかなりの知識がありますが、jquery-mobileなどのフレームワークを調べたほうがいいと思いました。 最初は、jquery-mobileはモバイルブラウザーをターゲットとするウィジェットフレームワークにすぎないと思っていました。jquery-uiによく似ていますが、モバイルの世界向けです。しかし、jquery-mobileはそれ以上のものであることに気付きました。多数のアーキテクチャが付属しており、宣言型のHTML構文でアプリを作成できます。したがって、最も簡単に考えられるアプリの場合、JavaScriptを1行で自分で書く必要はありません（これはクールです。 宣言的なhtml構文を使用してアプリを作成するアプローチをサポートするには、jquery-mobileとknockoutjsを組み合わせるのがよいでしょう。Knockoutjsは、WPF / Silverlightから知られているMVVMの超能力をJavaScriptの世界にもたらすことを目的としたクライアント側のMVVMフレームワークです。 私にとってMVVMは新しい世界です。私はすでにそれについてたくさん読んだことがありますが、私は実際にそれを実際に使ったことはありません。 したがって、この投稿は、jquery-mobileとknockoutjsを一緒に使用してアプリを構築する方法に関するものです。私のアイデアは、数時間見てから思いついたアプローチを書き留め、コメントするjquery-mobile / knockout yodaを用意して、最初にプログラミングがうまくいかない理由と、プログラミングを行うべきではない理由を説明することでした場所 ;-） html jquery-mobileは、ページの基本的な構造モデルを提供する優れた機能を果たします。後でページをajax経由でロードできることは十分承知していますが、すべてのページを1つのindex.htmlファイルに保持することにしました。この基本的なシナリオでは、2つのページについて話しているので、物事を把握するのはそれほど難しくありません。 <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="libs/jquery-mobile/jquery.mobile-1.0a4.1.css" /> <link rel="stylesheet" href="app/base/css/base.css" /> <script src="libs/jquery/jquery-1.5.0.min.js"></script> <script src="libs/knockout/knockout-1.2.0.js"></script> <script src="libs/knockout/knockout-bindings-jqm.js" type="text/javascript"></script> <script src="libs/rx/rx.js" type="text/javascript"></script> <script src="app/App.js"></script> <script src="app/App.ViewModels.HomeScreenViewModel.js"></script> <script src="app/App.MockedStatisticsService.js"></script> <script src="libs/jquery-mobile/jquery.mobile-1.0a4.1.js"></script> </head> <body> <!-- …

88 mvvm  jquery-mobile  knockout.js 

knockout.js 2.1.0では、foreachバインディングを使用するテンプレートで、$ index（）関数を介して現在のアイテムのインデックスにアクセスできます。ネストされたforeachバインディングで、テンプレートから$ parentのインデックスにアクセスする方法はありますか？ 次のようなデータ構造があるとします。 var application = { topModel: [ { {subModel: [{'foo':'foo'}, { 'bar':'bar'}]}, // this has top:0 and sub:0 {subModel: [{'foo2':'foo2'}, { 'bar2':'bar2'}]} // this has top:0 and sub:1 }, { {subModel: [{'foo':'foo'}, { 'bar':'bar'}]} // this is top:1 sub:0 }, { {subModel: [{'foo':'foo'}, { 'bar':'bar'}]} // …

87 javascript  knockout.js  jquery-templates 

パーミッションUIを構築しています。パーミッションのリストがあり、各パーミッションの横に選択リストがあります。権限は、選択リストにバインドされているオブジェクトの監視可能な配列によって表されます。 <div data-bind="foreach: permissions"> <div class="permission_row"> <span data-bind="text: name"></span> <select data-bind="value: level, event:{ change: $parent.permissionChanged}"> <option value="0"></option> <option value="1">R</option> <option value="2">RW</option> </select> </div> </div> ここで問題となるのは、UIが初めて入力されたときに、変更イベントが発生することです。ajax関数を呼び出し、権限リストを取得すると、権限アイテムごとにイベントが発生します。これは本当に私が望む振る舞いではありません。ユーザーが選択リストでアクセス許可の新しい値を実際に選択した場合にのみ発生させたいのですが、どうすればよいですか？

87 knockout.js 

値にノックアウトバインディングを持つ入力があります。 jqueryの.val（）メソッドを使用して値を更新すると、変更された値がviewModelに反映されません。 この値を設定するには、jQueryを使用する必要があります。viewModelの更新をトリガーするにはどうすればよいですか？

86 knockout.js 

Knockout.jsを使い始めたばかりです（常に試してみたかったのですが、ついに言い訳ができました！）-しかし、テーブルを比較的小さなセットにバインドすると、パフォーマンスに非常に悪い問題が発生します。データ（約400行程度）。 私のモデルには、次のコードがあります。 this.projects = ko.observableArray( [] ); //Bind to empty array at startup this.loadData = function (data) //Called when AJAX method returns { for(var i = 0; i < data.length; i++) { this.projects.push(new ResultRow(data[i])); //<-- Bottleneck! } }; 問題は、for上記のループが約400行で約30秒かかることです。ただし、コードを次のように変更すると、次のようになります。 this.loadData = function (data) { var testArray = []; //<-- Plain …

86 javascript  performance  knockout.js 

ノックアウトで、新しい値を受け取る前に、そのオブザーバブルへのサブスクリプション内のオブザーバブルの現在の値を取得することは可能ですか？ 例： this.myObservable = ko.observable(); this.myObservable.subscribe(function(newValue){ //I'd like to get the previous value of 'myObservable' here before it's set to newValue });

85 knockout.js  knockout-2.0  observable 

私のビューモデルには、trueまたはfalseの値を持つIsMale値があります。 私のUIで、次のラジオボタンにバインドしたいと思います。 <label>Male <input type="radio" name="IsMale" value="true" data-bind="checked:IsMale"/> </label> <label>Female <input type="radio" name="IsMale" value="false" data-bind="checked:IsMale"/> </label> 私が思う問題checkedは、文字列「true」/「false」を予期していることです。だから私の質問は、どうすればこのUIとモデルでこの双方向バインディングを取得できますか？

84 javascript  knockout.js  knockout-mapping-plugin  knockout-2.0 

バインドされたViewModelJavaScriptオブジェクトを特定のDOM要素から取得することは可能ですか？ ko.applyBindings( gLoginViewModel, document.getElementById("login-form") ); ko.applyBindings( gLoginViewModel, document.getElementById("register-form") ); そしてどこか他の場所-かなり無関係なコードで-次のようなもの： var viewModel = ko.getViewModel( formElement ); viewModel.someObservable( someData ); // observable available in all ViewModels 次のようなことができればさらに良いでしょう： var viewModel = ko.getViewModel( someChildElement );

83 javascript  knockout.js 

の値に基づいてマークアップを表示しようとしています。値を$index表示できますが、ifバインディングで使用できないようです。ここでの最善のアプローチは何ですか？ <!-- ko if: $index===0 --> <div>some mark up here</div> <!-- /ko -->

82 javascript  knockout.js