2011-11-11 9 views
5

html SELECTタグのOPTIONSの可視性について、2つのグループのブラウザ間で異なる動作をしているようです: OPTIONタグでvisibleをfalseに設定すると、関連するドロップダウンリストの項目はChromeとFirefoxでは表示されませんが、IE8とSafariでは引き続き表示されます。knockoutjs:オプションタグと可視性に関する問題

http://jsfiddle.net/v8gyG/12/

あなたはどんな提案を持っていますか、私が何か間違ったことをやっていますか?あなたがvisible属性を設定すると

答えて

5

私はそれがあった知っています長い時間前に尋ねましたが、答えを探しているときにGoogleでこの質問を見つけたので、答えが必要です。私は解決策を見つけたので、私はそれを共有するためにここに戻ります。 2年と "可視"はまだ動作しません**ので、私は "バインディング"を確認しました。オプション要素内のデータバインディングは、それを非表示にしたが選択可能にした。ノックアウトには、「コンテナレス制御フローの構文」と呼ばれるものもあります。

これが私の作品:

<!-- ko if: category.parent == 0 --> 
    <option data-bind="value: category.name, text: category.name"></option> 
    <!-- /ko --> 

場合はDOMを隠しので、それが動作します。ノックアウトウェブサイトから:

の場合は、可視バインディングと同様の役割を果たす。差異は であり、表示されているマークアップは常にDOM内に残り、 は常にデータバインド属性が適用されています。可視バインディングは だけでコンテナエレメントの表示を切り替えます。ただし、ifバインディングの は、DOM内に含まれているマークアップを物理的に追加または削除します。 となり、式がtrueの場合にのみ子孫にバインディングが適用されます。

あなたは、ドキュメントの詳細を読むことができます:http://knockoutjs.com/documentation/if-binding.html

ここ

チェックさまざまなオプション:http://jsfiddle.net/v8gyG/24/

Chromeで複数選択でクロム27とFirefox 21で動作しなく** "目に見えます"。

<!-- ko if: -->は、IE 10とChromeの複数選択でも動作します。

1

コードを使用すると、ページ番号を選択するための選択を使用している示唆しています。オプションを含むDependentObservableを作成することを検討してください。

viewModel.Pages = ko.dependentObservable(function() { 
    var pages = [] 
    for (var i=0 ; i < this.NumPages() ; ++i) { 
    pages.push({label: "Pag " + (i+1), value: (i+1)}) 
    } 
    return pages; 
}, viewModel) 

そして

ビュー内:2ページが選択されている場合は、 Page変数が含まれています

<select data-bind="value: Page, options: Pages, optionsText: 'label'></select> 

{: 'パグ2'、値:ラベルを2}

関連する問題