knockout.js - ko.toJSON 似乎忽略了字段

Question

我正在使用 knockoutjs 编写动态查询编辑器，但 ko.toJSON 直到字段被数据绑定(bind)表单元素修改后才会输出。见 this jsfiddle有以下观点:

<span data-bind="template: {name: 'filterGroupTemplate', data: viewModel}"></span>

<script type="text/x-jquery-tmpl" id="filterGroupTemplate">
    <div class="filterGroup">
        <div class="filterGroupParams">
            Match
            <select name="join" data-bind="value: join, options: joins"></select>
            of the following rules:
            <button class="addFilter" data-bind="click: addFilter">+</button>
            <button class="addGroup" data-bind="click: addGroup">{...}</button>
            <button class="removeGroup">x</button>
        </div>
        <span data-bind='template: {name: "filterTemplate", foreach: filters }'></span>
    </div>
</script> 

<script type="text/x-jquery-tmpl" id="filterTemplate"> 
    <div class="filter">
        {{if $data.filters }}       
            <div data-bind='template: "filterGroupTemplate"'> 
            </div>                 
        {{else}}
            <select data-bind="value: field, options: fields"></select>       
            <select data-bind="value: modifier, options: modifiers"></select>
            <input type="text" data-bind="value: criteria" />
            <button>x</button>
        {{/if}}
    </div>
</script>

<h2>ViewModel JSON</h2>
<div data-bind="text: dev()"></div>

而这段代码:

// filter class
var Filter = function() {
    this.field = ko.observable();
    this.modifier = ko.observable();
    this.criteria = ko.observable();
};

// filter group class
var FilterGroup = function() {
    // Include a blank filter in every group
    this.join = ko.observable('All');
    this.filters = ko.observableArray([new Filter()]);
    this.addFilter = function() {
        var filter = new Filter();
        this.filters().push(filter);
        this.filters.valueHasMutated();
    };
    this.addGroup = function() {
        var group = new FilterGroup();
        this.filters().push(group);
        this.filters.valueHasMutated();
    };
};

// Data
var joins = ['All', 'Any'];
var modifiers = [
    'equals',
    'not equal to',
    'less than',
    'greater than',
    'contains',
    'does not contain',
    'starts with'
];
var fields = ['f1','f2','f3'];

var viewModel = new FilterGroup();
function dev(){
    return ko.toJSON(viewModel);
}

ko.applyBindings(viewModel);

尽管 View 模型显然具有预先初始化的字段(例如 join 属性)，但它们不会显示在 JSON 对象中，直到用户在 UI 中更改它们。

有人可以解释我做错了什么以及如何解决吗？这实际上似乎是 knockoutjs 本身的一个错误。如果归根结底，如果值不存在，我将在构建查询时使用默认值，但这似乎是一个糟糕的解决方案

Answer 1

您的代码中有一个微妙的问题导致许多人大发雷霆。当您使用 options与 value 绑定(bind)在选择元素上绑定(bind)，您需要指定 options之前 value .
options绑定(bind)构建可用选项，然后值绑定(bind)强制选定选项和 View 模型值同步。如果您的顺序错误，那么 value绑定(bind)首先运行，发现没有匹配的选项可供选择，因此将值设置为 null。

这是您对切换顺序的摆弄:http://jsfiddle.net/rniemeyer/32fYk/

这已经在 github 上记录了几次，最近一次是在这里:https://github.com/SteveSanderson/knockout/issues/58 .目前没有一种简单的方法可以强制绑定(bind)在同一数据绑定(bind)中的另一个绑定(bind)之前运行。希望在某个时候可以解决这个问题。我可以通过让两个绑定(bind)检查另一个绑定(bind)是否列出来专门处理这种情况的修复程序。