如何在ractivejs中合理地處理選擇？

Question

我們正在尋求（重新）構建一個網絡應用程序。 我們想使其同構，以便服務器可以呈現相同的模板，但是將存在javascript狀態模型並處理更新。 我將ractivejs和胡須/車把視為一種頗有希望的選擇。

但是，我遇到了一個問題。 我們的大多數網站都是帶有某些擴展功能的表單。 我們有許多字段，但是可能會有許多數據行要渲染每個字段。 一些字段具有從屬字段：例如，一個國家列表的字段可能具有從屬字段狀態：對於某些國家，狀態字段不存在，而對於其他國家，狀態字段卻存在，但是根據國家/地區而具有不同的可能值。

例如，我們可能有以下數據

{
    "data": [{
        "firstName": "Joe",
        "lastName": "Bloggs",
        "travelDocument": "PASS BOOK",
        "issueCountry": "US",
        "issueState": "CA",
        "iterator_row_num": "0"
    },
    {
        "firstName": "Anne",
        "lastName": "Other",
        "travelDocument": "ID",
        "expiryDate": "2021-01-02",
        "issueDate": "1921-03-04",
        "iterator_row_num": "1"
    }],
    "fields": {
        "firstName": {
            "type": "text",
            "isList": false,
            "isDate": false
        },
        "lastName": {
            "type": "text",
            "isList": false,
            "isDate": false
        },
        "travelDocument": {
            "type": "list",
            "possibleValues": [{
                "name": "Passport",
                "dependentFields": [{
                    "name": "Issue Country",
                    "type": "list",
                    "possibleValues": [{
                        "name": "\u00c5land",
                        "value": "AX"
                    },
                    {
                        "name": "Finland",
                        "value": "FI"
                    },
                    {
                        "name": "Sweden",
                        "value": "SV"
                    },
                    {
                        "name": "United States",
                        "dependentFields": [{
                            "name": "Issue State",
                            "type": "list",
                            "possibleValues": [{
                                "name": "Alaska",
                                "value": "AL"
                            },
                            {
                                "name": "California",
                                "value": "CA"
                            },
                            {
                                "name": "New York",
                                "value": "NY"
                            }],
                            "isList": true,
                            "isDate": false,
                            "fieldName": "issueState"
                        }],
                        "value": "US"
                    }],
                    "isList": true,
                    "isDate": false,
                    "fieldName": "issueCountry"
                },
                {
                    "name": "Expiry Date",
                    "type": "date",
                    "isList": false,
                    "isDate": true,
                    "fieldName": "expiryDate"
                }],
                "value": "PASS BOOK"
            },
            {
                "name": "ID Card",
                "dependentFields": [{
                    "name": "Expiry Date",
                    "type": "date",
                    "isList": false,
                    "isDate": true,
                    "fieldName": "expiryDate"
                },
                {
                    "name": "Issue Date",
                    "type": "date",
                    "isList": false,
                    "isDate": true,
                    "fieldName": "issueDate"
                }],
                "value": "ID"
            }],
            "isList": true,
            "isDate": false
        }
    }
}

列表類型字段的<select>元素有一些問題。 我想在模板中執行的操作如下：

{{#data}}
    <input type="text" value="{firstName}" name="firstname[{{iterator_row_num}}]" />
    <input type="text" value="{lastName}" name="lastname[{{iterator_row_num}}]" />
    <select name="travelDocument[{{iterator_row_num}}]">
        {{#fields.travelDocument.possibleValues}}
            <option value="{{value}}"
                {{#if value == travelDocument }}
                    selected
                {{/if}}
            >{{name}}</option>
        {{/fields.travelDocument.possibleValues}}
    </select>
    {{#fields.travelDocument.possibleValues}}
        {{#if value == travelDocument}}
            dependent fields here
        {{/if}}
    {{/fields.travelDocument.possibleValues}}
{{/data}}

但是如果比較的話，小胡子是不允許的。 我嘗試在數據模型中添加一個內部計數器，並在每個循環開始時添加一個增量函數。 該函數基本上遍歷了各個字段，並根據當前數據為每個可能的值添加/更新了布爾值isCurrent屬性。 這在PHP中有效，但是隨后我不得不在js層重復我的增量函數。 而且我無法正常工作。 似乎根據相關字段的第一行設置了所有行

我的模板如下所示：

{{initLoop}}
{{#data}}
    {{advanceLoop}}
    <input type="text" value="{firstName}" name="firstname[{{iterator_row_num}}]" />
    <input type="text" value="{lastName}" name="lastname[{{iterator_row_num}}]" />
    <select name="travelDocument[{{iterator_row_num}}]">
        {{#fields.travelDocument.possibleValues}}
            <option value="{{value}}"
                {{#isCurrent }}
                    selected
                {{/isCurrent}}
            >{{name}}</option>
        {{/fields.travelDocument.possibleValues}}
    </select>
    {{#fields.travelDocument.possibleValues}}
        {{#isCurrent}}
            {{#dependentFields}}
                dependent fields here
            {{/dependentFields}}
        {{/isCurrent}}
    {{/fields.travelDocument.possibleValues}}
{{/data}}

我的數據模型上具有indexN （整數）和fixedIndex （布爾值）屬性。 initLoop函數只是將indexN設置為-1。

然后，我的功能有點像：

data._set_current_name = function() {
    this._currentName = false;
    if( this.data[this.indexN] !== undefined ) {
        this._currentName = this.data[this.indexN];
    }
    for( var field_id in this.fields ) {
        this._update_field_values(field_id, this.fields[field_id]);
    }
};
data._get_current_val = function(field_id) {
    var currentVal = '';
    if( false !== this._currentName && this._currentName[field_id] !== undefined ) {
        currentVal = this._currentName[field_id];
    }
    return currentVal;
};
data._update_field_values = function(field_id, field) {
    var currentVal = this._get_current_val(field_id);
    switch( field.type ) {
        case 'list':
            if( field.possibleValues ) {
                for( var posVal_i in field.possibleValues ) {
                    var posVal = field.possibleValues[posVal_i];
                    posVal.isCurrent = ( posVal.value === currentVal );
                    if( posVal.dependentFields ) {
                        for( var depField_i in posVal.dependentFields ) {
                            var depField = field.possibleValues[posVal_i].dependentFields[depField_i];
                            this._update_field_values(depField.fieldName, field.possibleValues[posVal_i].dependentFields[depField_i]);
                        }
                    }
                }
            }
            break;
        default:
            field.currentValue = currentVal;
            break;
    }
};
data.advanceNameLoop = function() {
    if( !this._fixedCounters ) {
        ++this.indexN;
    }
    this._set_current_name();
    return '';
};

我們還希望它在更改“父”字段的值時自動更新顯示哪些從屬字段。 嘗試在Ractive端添加一個觀察者，該觀察者為當前行設置索引，但並不能完全保留。 另外，更改選擇似乎甚至不會觸發它，而更改文本字段會觸發它？ （在選擇器上和.*上均與觀察者進行了嘗試，以獲取所有字段）。

我的觀察者看起來像：

names.observe('data.*.*', function(newValue, oldValue, keyPath){
    var pathParts = keyPath.split('.');
    this.viewmodel.data.setNameIndexes(pathParts[2]);
});

setNameIndexes為：

data.setNameIndexes = function(nameIndex) {
    this.indexN= nameIndex;
    this._fixedCounters = true;
};

我在這里是否正確？ 一個人應該如何處理多個字段的數據數組。 鑒於某些字段（例如國家/地區）可以具有很多可能的值，我真的想避免為每個數據行都單獨復制整個字段。 如果沒有更好的方法來處理小胡子/小胡子，這似乎很奇怪

（注意：這是我所擁有的簡化版本：我們對數據進行了分類，因此我有一個雙索引（類別，然后是名稱）以及更多字段。由於上述原因，可能會有一些小錯誤）

Answer 1

您無需使用ractive在標簽上手動設置所選屬性。 請參閱以下<select>元素部分： http : //docs.ractivejs.org/latest/two-way-binding

簡要查看頂部的JSON以及您要執行的操作，應該這樣做：

{{#each data}}
    ...
    <select name="travelDocument{{iterator_row_num}}" value="{{travelDocument}}">
        {{#each possibleValues}}
            <option value="{{value}}">{{name}}</option>
        {{/each}}
    </select> 
{{/each}}

這樣可以使data [i] .travelDocument及其選擇框值保持同步。

對於問題的第二部分，根據所選travelDocument顯示相關字段...

    {{#each fields.travelDocument.possibleValues}}
        {{#if value == travelDocument}}
            {{#each dependentFields}}
                I am a {{type}} named {{name}} <!-- you get the point -->
            {{/each}}
        {{/if}}
    {{/each}}

有很多方法可以做到，但這應該可以幫助您入門。