Knockout.js 使用带有映射插件和数据绑定的Knockout函数

我的问题和你的几乎完全一样 但是我使用映射插件

这是我的viewmodel和映射：

var viewModel = ko.mapping.fromJS(data);
viewModel.FromUnixTs = function (uts) {
    var date = new Date(uts * 1000);
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    return hours + ':' + minutes + ':' + seconds;
};
ko.applyBindings(viewModel);

这是我的html绑定：

<tbody data-bind="foreach: $root">
    <tr class="gv">
        <td data-bind="text: id"></td>
        <td data-bind="text: number"></td>
        <td data-bind="text: FromUnixTs(date_time())"></td>
    </tr>
</tbody>

还尝试：

• 可以工作，但格式不像日期时间

及

• viewModel.prototype.FromUnixTs=函数（uts）{

---

我经常遇到的错误是：

未定义unixts

或未找到。除了解决方案之外，我还希望为我的错误提供更多的上下文。我做错了什么以及原因等。

你不能在这样的对象实例上使用原型，直接将函数添加到引用中

但不是很好的做法，而是去做

---

你有几个问题。这是我的两个cts

这不是一个大问题，但是如果你能以这样的方式来构造你的数据，即顶层不是数组本身，而是一个带有该数组的对象，那就更清楚了，例如

{items:[/*这里的原始数据*/]}

使用MVVM模式时，最好不要将逻辑放在视图中，而

text:FromUnixTs（date_time（））

将其作为边界。相反，将所有逻辑放在视图模型中，只需使用

text:UnixTx

绑定即可。这也可以解决围绕

prototype

内容的问题中的问题代码

如果要增强使用映射插件创建的视图模型，可以通过创建映射选项来实现，该选项允许您在创建模型时调整模型

最后，还有一个问题让其他人无法帮助您：您的问题包含不相关的代码（jQuery ajax的东西），这使您更难理解问题，并且示例是不完整和无效的片段（未关闭的标记等）。此外，您在一个问题中问了许多问题，产生了一个非常大的问题（几乎是一个审阅请求）因此，用户倾向于回避

如果我把所有这些放在一起（至少1-3），那么我会建议一种不同的方法，如下所示。更新您的观点：

没有逻辑

然后，假设以下数据：

var data = {
    items: [{id: 1, number:  42, date_time: 1375948769449},
            {id: 2, number: 106, date_time: 1375948769349}]
};

我将使用映射插件构建视图模型，如下所示：

var mapping = {
    'items': {
        create: function (item) {
            return new ItemViewModel(item.data);
        }
    }
};

var viewModel = ko.mapping.fromJS(data, mapping, {});

这使用了一个

ItemViewModel

构造函数，该构造函数使用

unixTs

可观察值来扩充映射的VM：

var ItemViewModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);
    this.unixTs = ko.computed(function () {
        var date = new Date(self.date_time());
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        return hours + ':' + minutes + ':' + seconds;
    });
};

你可以在中看到这一切。希望这有帮助

---

如果无法从服务器更改数据结构，则仍可使用增强视图模型版本。只需进行一些更改：

// Data not augmented, just the raw array OP gets from the service
var data = [{id: 1,number: 42,date_time: 1375948769449},
            {id: 2,number: 106,date_time: 1375948769349}];

// Augment the data into an object to make a clearer view model:
var viewModel = ko.mapping.fromJS({items: data}, mapping, {});

---

请参阅。

Hi Anders，谢谢您的回复，但我已经测试了您的第一种方法。它不起作用，为什么这是一种不好的做法？即使使用

viewModel.FromUnixTs=function（）{

和

我从Unixts中得到的

没有定义

谢谢，关于nr4。我添加了jQuery部分，以防它与全局变量有关，无法访问它或其他东西。我以前从未在ajax的成功函数中创建过viewmodel。未关闭的html只是试图保持它的可读性。B但是我可以肯定地回答这个问题。顺便问一下，Anders的第一个选项真的对我有用吗？关于第一点：我无法更改从服务器接收的数据。因此我无法将其包装在对象中。但是我猜KO映射插件会采用这个变量映射并处理该部分。但是不知何故，我得到的

项不是defined

我为无法更改服务器结果的情况添加了一个脚注。如果您仍然有问题，我建议您将其归结为问题，并就这个问题提出一个新问题。这可能是获得SO用户良好响应的最简单方法。祝您好运！

var ItemViewModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);
    this.unixTs = ko.computed(function () {
        var date = new Date(self.date_time());
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        return hours + ':' + minutes + ':' + seconds;
    });
};

// Data not augmented, just the raw array OP gets from the service
var data = [{id: 1,number: 42,date_time: 1375948769449},
            {id: 2,number: 106,date_time: 1375948769349}];

// Augment the data into an object to make a clearer view model:
var viewModel = ko.mapping.fromJS({items: data}, mapping, {});