1

すべてのスクリプトが参照されているメイン ページがあり、本文内にテンプレート データ バインディングを持つ duv コンテナがあり、htm がそこにバインドされています。

問題は、Jquery によって制御されている機能が正しく機能していないことです。たとえば、日付ピッカーは、JavaScript が参照されているメイン ページに配置すると機能しますが、テンプレートにバインドされている htm 内では機能しません。

すべてのライブラリが適切にロードされていますが、テンプレート内で呼び出されたときに jquery 機能が機能しません。

例: メインページ:

<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.qtip.js"></script>
<script src="Scripts/foundation.min.js"></script>
<script src="Scripts/jquery.tablesorter.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<script src="Scripts/languageswitcher.js"></script>

<div id="Container" ua-app-id="topVm" data-bind='template: {name: pageModel, data: pageVM }'>                   
</div>
<!-- Initialize JS Plugins -->
<script src="Scripts/app.js"></script>

これで、ビューが実行時にメイン ページに読み込まれます。ビュー内に日付ピッカーがありますが、機能しません。それをメインページに入れると、うまくいきます。

4

1 に答える 1

0

これは、テンプレートがレンダリングされる前に jQuery コードが実行されるためだと思います。テンプレート バインディングで提供される afterRender コールバックを使用して、datepicker を有効にできます。詳細と例については、ドキュメントを参照してください。

しかし、これを達成するためのさらに優れた方法は、カスタム バインドを作成することです。このようなもの：

ko.bindingHandlers.datepicker = {
    init: function(element){
        $(element).datepicker();
    },
    update: function(element) {
        $(element).datepicker('refresh');
    }
};

次に、次のようにして、テキスト入力を日付ピッカーにすることができます。

<input type="text" data-bind="datepicker:true" />

カスタム バインディングの詳細については、こちらをご覧ください

于 2013-01-22T22:35:09.427 に答える