2

Knockout.jsでjQueryMobileDateBoxを正常に使用した人はいますか？

日付を選択する前に表示する値を指定すると、バインディングが機能しません。空白のままです。標準のテキスト入力を使用すると、バインディングは正常に機能します。

<input id="start" type="date" data-bind="value: start" data-role="datebox" data-options='{"mode": "timeflipbox", "useButton": false, "useFocus": true, "dialogForce" : true, "transition" : "slidedown"}'>

//In the view model:
this.start = ko.observable(startTime);

私はもう試した

$('#start').datebox('refresh')

しかし運がない…。

4

2 に答える 2

3

私は結局、ノックアウト用のカスタムバインディングを作成しました。これは、トリックを実行しているようです。

    ko.bindingHandlers.jqmDateBox = {
    update: function (element, valueAccessor, allBindingsAccessor, context) {
        setTimeout(function () { 
            var value = valueAccessor();
            var valueUnwrapped = ko.utils.unwrapObservable(value);
            $(element).val(valueUnwrapped);
            $(element).data('datebox').options.defaultPickerValue = valueUnwrapped;
        }, 0);
    }
}

使用法：

<input id="end" name="end" type="date" data-bind="value: end, jqmDateBox: end" data-role="datebox" />
于 2012-08-30T09:11:12.350 に答える
0

デビッドが提供したバインディングは私にはうまくいきませんでした。最新の不安定なバージョンのDateboxを使用しています。

私はこのバインディングを作成しました。これはcalboxモードで機能します。

ko.bindingHandlers['dateboxvalue'] = {
  'init': function(element, valueAccessor, allBindingsAccessor, viewModel) {

     ko.utils.registerEventHandler(element, "change", function () {
       var value = valueAccessor();
       value($(element).datebox('getTheDate'));
  });
},
  'update': function (element, valueAccessor, allBindingsAccessor, context) {

    $(element).datebox();
    $(element).datebox('setTheDate', ko.utils.unwrapObservable(valueAccessor()));
    $(element).trigger('datebox', {'method':'doset'});
  }
};

このように使用する

<label for="mode1">CalBox</label>
<input name="mode1" id="mode1" type="text"
       data-role="datebox"
       data-options='{"mode":"calbox", "useNewStyle":true}'
       data-bind="dateboxvalue: myDate"/>
于 2013-05-23T08:01:41.270 に答える