我对敲出js很陌生,但到目前为止我还是喜欢它!我正在用MVC4编写,遇到了一些障碍。我已经掌握了静态数据,但现在我正在使用通过JSON从控制器传递的数据,并且不确定如何执行此操作。

最初,我的活动有一个“班级”:

function Activity(context) {
    var self = this;
    self.type = context.type;
    self.name = context.name;
    self.time = ko.observable(context.time);
    self.product = context.product;
    self.item = context.item;
    self.itemAmount = context.itemAmount;

    self.formattedPrice = ko.computed(function () {
        var price = context.netPrice;
        return price ? "$" + price.toFixed(2) : "None";
    });
}


在我的视图模型中填充了静态数据:

self.activities = ko.observableArray([
        new Activity({ type: 1, name: "John Smith", time: "1 hour", itemAmount: "5", netPrice: 232.16 }),
        new Activity({ type: 1, name: "Jane Doe", time: "2 hours", itemAmount: "7", netPrice: 4812.30 }),
        new Activity({ type: 1, name: "Clark Kent", time: "4 hours", itemAmount: "5", netPrice: 19.09 }),
    ]);


很棒,我可以使用ko.computed方法更改我的数据。现在,我正在提取数据,现在将代码压缩为:

function ActivityViewModel() {
    var self = this;
    self.activities = ko.observableArray();
    $.getJSON("Home/ActivityData", self.activities);
}


在我的数据绑定字段中,我只是将文本调用从其变量名转换为以$ data开头的数据库记录名,这很好。 -很酷很容易。

问题是我有一个需要通过moment.js“人性化”的时间字段,所以问题是...如何才能在JSON之后访问self.activities数据并编辑特定字段?

抱歉,如果这很容易,但我在此事上没有找到帮助的运气(我可能没有找到正确的位置)。提前致谢!

更新



从服务器获取JSON的数据来自此LINQ查询:

var Data = from m in dataContext.Activities
                   select new
                   {
                       Type = m.Type,
                       ClientName = m.ClientName,
                       UserID = m.UserID,
                       ProductsNo = m.ProductsNo,
                       ProductName = m.ProductName,
                       NetPrice = m.NetPrice,
                       Time = System.Data.Linq.SqlClient.SqlMethods.DateDiffSecond(m.RecordCreated, DateTime.Now)
                   };


我需要在客户端执行的操作是使用Time变量,并在javascript中对其运行一个函数。我认为这是通过ko.computed()函数完成的,但是一旦将Time变量放入self.activities中,我似乎无法弄清楚如何将其作为目标。

最佳答案

请记住,淘汰赛是基于MVVM模式的(尽管我认为它会滴入MV *)

您需要一个类模型。通常,在模型内部可以更改的任何项目都应该是可观察的。如果类型,名称,产品等不会改变,则不必担心使其可观察,但是如果可以更改,请考虑对其进行更新。

function activityModel(context) {
    var self = this;
    self.type = ko.observable(context.type);
    self.name = ko.observable(context.name);
    self.time = ko.observable(context.time);
    self.product = ko.observable(context.product);
    self.item = ko.observable(context.item);
    self.itemAmount = ko.observable(context.itemAmount);

    self.formattedPrice = ko.computed(function () {
        var price = context.netPrice;
        return price ? "$" + price.toFixed(2) : "None";
    });
}


然后,在视图模型中,如果未使用映射库,则需要在AJAX调用成功返回后遍历结果并为每个对象创建一个对象(记住$ .getJSON只是速记AJAX)-

function activityViewModel() {
    var self = this;
    self.activities = ko.observableArray();
    $.getJSON("Home/ActivityData", function(data) {
      $.each( data, function( key, val ) {
        self.activities.push(new activityModel(data));
      });
    });
}


最后,您需要一个自定义的绑定处理程序以人类可读的方式显示dateTime。您可以在视图模型之前进行注册-

ko.bindingHandlers.DateTime = {
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        var date = moment(value());
        var strDate = date.format('MMMM Do YYYY, h:mm:ss a');
        $(element).text(strDate);
    }
};


然后在您的视图中使用它-

<div data-bind="foreach: activities">
    <span data-bind="DateTime: time"></span>
</div>

09-26 16:25
查看更多