2

不知道如何映射使用 ko.viewmodel 计算的字段有人知道它是如何完成的吗？非常感谢任何帮助。

var model = {
    firstName: "Le gatêau",
    lastName: "Chien",
    items: ['J-Rock', 'J-Pop'],
    itemselected: 'J-Pop',
    all: function(){ return firstName + ', ' + lastName + ', ' + itemselected },
};

编辑：

我很遗憾没有更清楚，我编辑了我的问题，我正在使用 ko.viewmodel 插件将对象转换为 ko 模型，但不是作为字段 ko.computed 对象被定义为 ko 当地图被识别为一个计算：

var updatedModel = {
    firstName: "El pastel",
    lastName: "Perro",
    items: ['Pop', 'Rock'],
    itemselected: 'Rock',
    all: function(){ return firstName + ', ' + lastName + ', ' + itemselected },
};
var viewModel = ko.viewmodel.fromModel(model);
ko.applyBindings(viewModel);

我的完整代码在这里DEMO

编辑2：

感谢您的回复，我将最终代码与我想要的功能放在一起：

JS：

var options = {
    extend: {
        "{root}": function (m) {
            m.all = ko.computed(function () {
                var item = ko.utils.arrayFirst(m.music(), function (g) {
                    return g.id() == m.selected();
                });
                if (item == null) return '';
                return m.like() + ' ' + item.name();
            });
        }
    }
};
var m1 = '{"like":"Pastel","music":[{"id":1,"name":"J-Pop"},{"id":2,"name":"J-Rock"},{"id":3,"name":"Rock"}],"selected":"3"}';
var m2 = '{"like":"Gatêau","music":[{"id":1,"name":"J-Pop"},{"id":2,"name":"J-Rock"},{"id":3,"name":"Rock"}],"selected":"2"}';
var viewmodel = ko.viewmodel.fromModel(JSON.parse(m1), options);
ko.applyBindings(viewmodel);
setTimeout(function () {
    console.clear();
    ko.viewmodel.updateFromModel(viewmodel, JSON.parse(m2));
}, 2300)

HTML：

Comida:
<input data-bind="value: like" />
<br/>Musica:
<select data-bind="options: music, optionsText: 'name', optionsValue: 'id', value: selected"></select>
<br/>

<h1 data-bind="text: all"></h1>

最后的演示在这里FINAL-DEMO

4

2 回答 2

5

如果我解决了您的问题，您需要ko.computed模型上的属性。该插件ko.viewModel提供options控制您的视图模型。使用该extend选项创建计算属性all，而不是直接添加到对象。我为此创建了一个小提琴：http: //jsfiddle.net/sublimejs/L6Wm3/8/。

于 2014-08-01T16:18:02.457 回答
1

这很棘手，你可以这样做，但我不确定这是最好的解决方案：

http://jsfiddle.net/L6Wm3/3/

基本上，在创建视图模型之后，您需要手动映射该函数：

var viewModel = ko.viewmodel.fromModel(model);
viewModel.all = ko.observable(model.all());

然后，当您更新时，您可以：

ko.viewmodel.updateFromModel(viewModel, updatedModel);
viewModel.all(updatedModel.all());

请注意，您的功能实际上并没有工作，需要更改：

all: function(){ return this.firstName + ', ' + this.lastName + ', ' + this.itemselected }

或者，您可以将 a 添加ko.computed到您的视图模型中，只要all函数始终相同：

var viewModel = ko.viewmodel.fromModel(model);
viewModel.allComp = ko.computed(function() {
    return viewModel.firstName() + ', ' + viewModel.lastName() + ', ' + viewModel.itemselected();
});

然后绑定到那个而不是all. 这有一个额外的优势，即它只会在您更新绑定时起作用。

http://jsfiddle.net/L6Wm3/5/

于 2014-08-01T15:57:43.027 回答