asp.net mvc spa durandaljs日期格式不适用于Knockout

时间:2013-05-14 15:37:35

标签: asp.net-mvc-4 knockout.js durandal hottowel

我正在为asp.net mvc SPA探索durandaljs。我正在使用APS.net MVC4,Durandaljs,Knockoutjs,微风,时刻以及在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没有更新GUI,而我可以在控制台日志中看到更新的格式日期。有人可以告诉我,我在这里失踪了什么。提前致谢。

2 个答案:

答案 0 :(得分:1)

问题可能在于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);
            }
};

现在,不要使用“text”绑定处理程序,而是使用“moment”绑定处理程序,如下所示:

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

编辑:添加了一个使用带有RequireJS的AMD模块添加自定义插件的示例:

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(); 
                                });
                            }
                        );
                    }
                );
            }
        );
    }
);

答案 1 :(得分:0)

如何制作一个ko.Computed如下

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。