Knockout的日期格式问题以及同步修改的breeze.js entityAspect的同步问题

Question

好吧,所以这不是第一次,但是我很难找到约会.;-)

我正在使用Breeze,Knockout.有一个表格,我希望显示短日期.

<input name="start" data-bind="value: start" class="date required" required="required" placeholder="mm/dd/yyyy" style=" width:142px"> 

产生长日期时间:2011年8月31日星期三20:00:00 GMT-0400(东部夏令时).

创建格式化所需短日期的方法可以实现创建短日期的目标,但我的modelContext不知道任何更改通知.所以我的对象不会通知屏幕变化.我可以尝试通过点击等方式通知dataContext来解决这个问题,但我希望在转换过程中没有丢失.

function positionInitializer(posit) {

    var shortDate = function (date) {
        return date && moment.utc(date).isValid() ? moment.utc(date).format('L') : "";
    };

    posit.start = ko.observable(shortDate(posit.start()));
}

有没有关于如何做到这一点的体面的例子？

当我打电话给查询时,我不认为我可以转换为b/c我正在扩大通话中的表格数量而你不能同时执行这两项操作.

        var query = EntityQuery.from('Positions')
        .where('id', '==', id)
        .expand('Company, Projects')
        .orderBy(orderBy.positions);

以为我会看到蜂巢头脑的想法......

Answer 1

使用Knockout处理日期格式有两个很好的选择.

可写的

您可以为日期值创建一个可写的可写,并在那里进行所有格式化和解析.例如:

var myViewModel = function(){
    var self=this;
    self.trueDate = ko.observable(new Date());
    self.formattedDate = ko.computed({
        read: function(){
            return moment(self.trueDate()).format('L');
        },
        write: function(value){
            self.trueDate(moment(value).toDate());
        }
    });
}

<input type="text" data-bind="value: formattedDate" />

每当后备可观察的"trueDate"被更新时,其观察者将被警告.

自定义绑定

另一种方法是构建自定义数据绑定以在绑定期间格式化数据并使视图模型简单.

var myViewModel = function(){
    var self=this;
    self.trueDate = ko.observable(new Date());
}

ko.bindingHandlers.dateString = {
    init : function(element, valueAccessor) {
        //attach an event handler to our dom element to handle user input
        element.onchange = function(){
            var value = valueAccessor();//get our observable
            //set our observable to the parsed date from the input
            value(moment(element.value).toDate());
        };
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        if (valueUnwrapped) {
             element.value = moment(valueUnwrapped).format('L');
        }
    }
};

(请记住,上面的绑定代码未经测试,并且不检查无效输入等)

然后你的绑定就会

<input type="text" data-bind="dateString : trueDate" />

我更喜欢自定义绑定方法,因为它可以很容易地重用于其他日期和视图模型.自定义绑定还可以读取该元素上的其他绑定,因此您可以将日期格式字符串配置为绑定,而不是将其硬编码为"L".

我希望这有帮助!