Формат даты asp.net mvc spa durandaljs не работает с Knockout

Я изучаю durandaljs для asp.net mvc SPA. Я использую APS.net MVC4, Durandaljs, Knockoutjs, breeze, moment и другие библиотеки, найденные в образце hottowel SPA.

У меня есть клиентское представление, связанное с DOB, DateTime.

    <td colspan="2">
                    <span id="dob" data-bind="text: DOB"></span>
            </td>

и моя ViewModel содержит код

    vm.studentProfile().DOB(moment(vm.studentProfile().DOB()).format('L'));
        logger.log(vm.studentProfile().DOB(), null, system.getModuleId(vm), false);

Приведенный выше код фактически исходит из querySucceeded. т.е.

    return manager
        .executeQuery(query)
        .then(querySucceeded)
        .fail(queryFailed);

Это должно было работать, поскольку я уже достиг этого для некоторых других полей, но в случае DateTime KnockoutOut не обновляет графический интерфейс, тогда как я могу видеть дату в формате UPDATED в журнале консоли. Может кто-нибудь сказать мне, что мне здесь не хватает. заранее спасибо.


asp.net-mvc-4 knockout.js durandal hottowel
person afr0    schedule 14.05.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Проблема может заключаться в том, что DOB - это дата MomentJs, а не JavaScript Date или строка. Скорее всего, вам потребуется добавить настраиваемый обработчик привязки для отображения этих дат, например:

ko.bindingHandlers.moment = {
            update: function(element, valueAccessor) {
                var value = valueAccessor();
                var formattedValue = ko.utils.unwrapObservable(value).format('LLLL');
                $(element).text(formattedValue);
            }
};

Теперь вместо использования обработчика привязки «текст» используйте обработчик привязки «момент» следующим образом:

<span id="dob" data-bind="moment: DOB"></span>

Изменить: добавлен пример добавления пользовательских плагинов с использованием модулей AMD с RequireJS:

require(['jquery', 'json2', 'sammy', 'amplify', 'bootstrap', 'moment', 'toastr', 'showdown', 'markdowneditor', 'spin'], 
        function($){

        // Require that plugins be loaded, after the prerequisite libraries
        //       We load the plugins here and now so that we don't have to 
        //       name them specifically in the modules that use them because
        //       we don't want those modules to know that they use plugins.
        requirejs([
                'jquery.ui',                // jquery plugin
                'jquery.mockjson',          // jquery plugin
                'jquery.tmpl',          // jquery plugin
            ], 
            function () { 
                require(['ko'],
                    function(ko) {
                        // ensure KO is in the global namespace ('this') 
                        if (!this.ko) {
                            this.ko = ko;
                        };

                        requirejs([
                                'libs/knockout.binding.handlers',       // Knockout custom binding handlers
                                'libs/knockout.extenders',       // Knockout custom binding handlers
                                'libs/bootstrap.extenders',       // Knockout custom binding handlers
                            ],
                            // Plugins generally don't return module objects
                            // so there would be point in passing parameters to the function
                            function () { 
                                require(['app'], function(App) {
                                    App.initialize(); 
                                });
                            }
                        );
                    }
                );
            }
        );
    }
);
person Jalayn    schedule 14.05.2013
comment
Я уже пробовал это, но это не работает из ViewModel ... Я только что обнаружил, что мне нужно поместить его в глобальный файл js ... должен работать, но я уже получил его, работающий с JQuery и viewAttached. Теперь я просто пытаюсь настроить свой календарь ... который ведет себя не так, как должен быть в пределах durandal ... - person afr0; 14.05.2013
comment
Можете ли вы сказать мне, где я могу разместить этот код ... и как его использовать я использую require ... я вставил глобальные js, но это не очень хорошо. Я про модули amd .. я только новичок - person afr0; 14.05.2013
comment
Если вы используете requireJs, вам необходимо добавить обработчик привязки после загрузки KnockoutJS. В качестве альтернативы, если вы просто хотите сначала проверить, работает ли он, прежде чем вносить десятки изменений, вы можете просто изменить скрипт KnockoutJs и включить в него этот новый обработчик привязки. Не беспокойтесь о модулях amd, это сложно, даже если вы не новичок :-) - person Jalayn; 14.05.2013
comment
@ afr0 Я добавил пример, который использовал для одного из моих любимых проектов. Конечно, некоторых модулей у вас нет, но идею вы поняли. Ключевым моментом является добавление пользовательских привязок KnockoutJS после его загрузки. - person Jalayn; 14.05.2013
comment
этот код потребует у меня времени, чтобы проверить на самом деле ... я ненавижу js date pickerz, и это причина, по которой я пока придерживаюсь своего рабочего обходного пути: D. Я знаю, что не могу избежать этого, но я попробую - person afr0; 14.05.2013

arrow_upward
0
arrow_downward

А как насчет того, чтобы просто сделать ко? Рассчитывается следующим образом

vm.studentProfileFormatted = ko.computed({
  read: function () {
    return moment(vm.studentProfile().DOB()).calendar();
  },
  write: function (value) {
    var time = moment(value, "MM-DD-YYYY").toJSON();
      vm.studentProfile(time);
  },
  owner: vm
});

А затем вызовите studentProfileFormatted в вашем представлении.

person PlTaylor    schedule 16.05.2013