1

ASP.NET MVC 4 を使用した Timeline.js と Knockout.js について質問があります。タイムライン +ノックアウト+デートピッカーの人々がそこにいます。

以下を含むビューがあり、div と ajax リンクを使用して、その div に部分ビューを設定します。

<div>Starting Order Date: <input data-bind="datepicker: StartDate, datepickerOptions: { maxDate : $.now() }" /></div>

<div id="Status"></div>
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#Status" href="/Track/Status/1">Blarg</a>

<script src="~/ViewModels/TrackModels.js"></script>

TrackModels.js には、datepicker 用のノックアウト エクステンダーがあります。簡潔にするために「更新」とdom破棄の部分を削除しましたが、本質的にはjquery-ui datepickerを使用したknockoutjs databindにあるものです

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options);
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).datepicker("getDate"));
        });
    }
};

そして、ajax リンクによって返され、ステータス div を置き換える部分的なビューは次のとおりです。

@model MyProject.Data.DTO.Timeline
<div id="timeline-embed"></div>
<script type="text/javascript">
    var timeline_config = {
        width: '100%',
        height: '500',
        source: {
            "timeline":
                @Html.Raw(@Json.Encode(Model)) 
            }
    }
</script>
<script type="text/javascript" src="~/scripts/js/storyjs-embed.js"></script>

さて、問題！ajax リンクをクリックする前に、datepicker が適切に機能してノックアウト モデルを更新します。ajax リンクをクリックすると、タイムラインが適切に表示され、本来あるべきものが表示されます。ただし、私の日付ピッカーはエラーで失敗し始めます:

TypeError: $(...).datepicker is not a function
observable($(element).datepicker("getDate"));

それで、どういうわけか、私が最初にバインドした要素は、それが日付ピッカーであることが失われています。できる....理由を教えてくれる人はいますか？部分的にstoryjs-embedを貼り付けることで何か問題がありますか? わかりません... Firebug でステップスルーすると、datepicker はまだ変更イベント ハンドラーをスローしていますが、何らかの理由で、要素が datepicker であることを失っているようです。助けてくれてありがとう！

編集：

残念ながら、Jeroen さん、それは完全ではありませんでした (提案された変更を試みましたが、それでも同じエラーが発生しました)。ただし、initセクションを次のように変更すると、

init: function(element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().datepickerOptions || {},
        $el = $(element);
    $el.datepicker(options);
    ko.utils.registerEventHandler(element, "change", function () {
        var observable = valueAccessor();
        observable($el.datepicker("getDate"));
    });
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
        $el.datepicker("destroy");
    });
},

そして、次の更新セクションを完全にコメントアウトします。

update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor()),
        $el = $(element);
    if (String(value).indexOf('/Date(') == 0) {
        value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
    }
    var current = $el.datepicker("getDate");
    if (value - current !== 0) {
        $el.datepicker("setDate", value);
    }
}

次に、Ajaxリンクを開いた後、私のdatepickerは同じエラーでエラーになりません。init セクションを元の状態 ($el なし) のままにすると、エラーが発生します。

4

0 に答える 0