問題タブ [bootstrap-switch]

アプリケーションで angular と bootstrap-switch プラグインを使用しています。それはこのように動作します：

問題は、そこで見つけたすべての属性を使用したい場合、機能しないことです。

スイッチで ng-model を使用するにはどうすればよいですか? 次のように使用したいと思います。

以下に示すこの質問から参照されるノックアウト バインディング ハンドラーと一緒にブートストラップ スイッチを使用しています。

これは非常にうまく機能しているようで、ここでそれをどのように使用しているかを示すためにフィドルをモックアップしました:

http://jsfiddle.net/swervo/of0q42j0/5/

ただし、満足のいく方法で解決できないように見えるいくつかの問題があります。

1) ko.observable 配列にアイテムの配列がある場合、それらすべてにクリック ハンドラーを配置し、次のように親ビュー モデルで関数を呼び出させることができます。

これは、呼び出されると、アイテム独自のビュー モデルを通過します。これは、クリックされた項目のプロパティ (id など) を取得するのに非常に便利です。これがいかに簡単かを示すために、上のフィドルにボタンを配置しました。

ただし、単純なボタンの代わりにブートストラップ スイッチを使用している場合、スイッチは親を認識していないようで、スイッチを含むビュー モデルを親に渡すエレガントな方法を見つけることができません。ボタンでできます。配列内の各項目にその親ビュー モデルへの参照を与えようとしましたが、これは機能しますが、循環参照が作成されるため、正しいアプローチではないようです。

2）私が構築しているアプリケーションでは、リスト内のアイテムの状態を別のクライアントで変更できます-これらのリモートクライアントを反映するためにローカル状態を更新する必要があります。同様に、ローカル クライアントで状態を変更することもできます。これは、他のクライアントに伝達されます。ここでの問題は、ローカルで発生した状態の変更 (つまり、ユーザーがスイッチをクリックしたため) とリモートで発生した変更 (つまり、サーバーからの更新による変更) をどのように区別するかです。私の実際のプロジェクトでは、ノックアウト サブスクライブを使用して、次のようにスイッチにリンクされた値の変更をリッスンしています。

スイッチが新しい状態を反映するように変更されたときに、サーバーから更新を受信して​​から、サーバーを (同じ状態で) 再度更新することを避けたいと考えています。現時点では、更新を送信する前にサーバーの状態をテストして (上記のコード スニペットに示されているように)、これを修正しました。保留状態の更新と同じ場合は破棄します。(上記のフィドルのボタンを使用してサーバーの更新をシミュレートしました)。

これらの問題に対する私の解決策はどちらもエレガントに感じられないため、ここで質問します。どんな助けでも大歓迎です。

AngularJSモデルにバインドされたチェックボックスでbootstrap-switchを使用しようとしましたが、機能していないことに気付きました。

さらに調査したところ、モデルの変更によってチェックボックスが変更されたときに、Javascript の onChange/onClick イベントがまったく発生しないことがわかりました。FiddleJSに示されているように

• angular $digestがチェックボックスの状態を変更したときにイベントが発生しないのはなぜですか?
• 私はここで何か間違っていますか？

私は Wrapbootstrap テンプレートを使用しています。ルーティングとng-viewのようなものを使用して、それを単一ページアプリケーションに変換しました。

このサードパーティのテンプレートは、ブートストラップ スイッチを使用しているようです。しかし、bootstrap-switch.js を参照していません。代わりに、「make-switch」クラスの要素をスイッチに変換する toggler.js と呼ばれるものがあります。

質問 1: ベンダーは、この JS を作成するために Bootstrap Switch v2.0 を微調整しましたか?

toggler.js のコード

質問 2: angular ディレクティブを使用して、このスイッチの双方向バインディングを実行しようとしています。機能していないようです。発生する唯一のイベントは「変更」ですが、toggler.js で「setState」のような関数と「switch-change」のようなイベントを見ることができますが、それらは発生していません。「変更」の場合、適切な双方向バインディングを行うにはどうすればよいですか?

そして私はそれを次のように使用しています