MVC 应用程序不在表单重新编辑中显示选定的值

Question

我正在构建一个 Framework7 MVC 应用程序，发现自己陷入了死胡同。我有一个需要评估的表格。此表单包含 selects。我正在使用 localStorage 来存储表单值，从这个意义上说一切正常，我的意思是一切都正确存储。 ¿ 问题是什么？当我填写表格时，我会回答一些关于 textareas 输入、select 输入和输入的问题。一切顺利，直到我尝试重新编辑表格，然后表格上的所有内容都正确显示，包括我从以前的答案中得到的分数，但是 selects 似乎我从未接触过它们。他们之前 selected 的值被存储但不显示在表单上。我发现问题是由于我已将数值设置为选项值，但表格显示的是“是”或“否”。如果我将选项值更改为“是”或“否”，则表单会正确显示，但我需要设置“5”或“0”，因为我需要评估用户的答案。

这是我的代码

形式

<li style="margin-top:-10px;">
<input style="visibility:hidden;height:1px;" value="0" name="choice" onchange="checkTotal()"/>
<input style="visibility:hidden;height:1px;" value="1" type="checkbox" name="choice" onchange="checkTotal()" checked="on">
</li>
<li><div class="item-content">1. ¿Sueles quejarte de sentirte mal?</div>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<select name="pr1" id="pr1" onchange="checkTotal()">
<option class="item-inner" value="5">No</option>
<option class="item-inner" value="0">Si</option>
</select>
</div>
</div>
</div>
<div class="item-content">En tal caso,</div>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<textarea class="resizable" id="pr1notes" placeholder="¿cuál es la causa?">{{model.pr1notes}}</textarea>
</div>
</div>
</div>
</li>

editController上的功能

function init(query){
var protections = JSON.parse(localStorage.getItem("f7Protections"));
if (query && query.id) {
protection = new Protection(_.find(protections, { id: query.id }));
state.isNew = false;
}
else {
protection = new Protection({ isFavorite: query.isFavorite });
state.isNew = true;
}
View.render({ model: protection, bindings: bindings, state: state, doneCallback: saveProtection });

showSelectedValues();
}

function showSelectedValues(){
var fieldNames = protection.getSelectFields();
for (var i = 0, len = fieldNames.length; i < len; i++) {
var itemname =  fieldNames[i];
var selectObj = document.getElementById(itemname);
if (selectObj!=null) {
var objOptions = selectObj.options;
var selIndex=0;
for (var j = 0, len2 = objOptions.length; j < len2; j++) {
if ((objOptions[j].label).localeCompare(protection[itemname])==0){
selIndex=j;
}
}
selectObj.options[selIndex].setAttribute("selected","selected");
}else{
}
}
}

和模型

Protection.prototype.setValues = function(inputValues, extras) {
for (var i = 0, len = inputValues.length; i < len; i++) {
var item = inputValues[i];
if (item.type === 'checkbox') {
this[item.id] = item.checked;
}
else {
this[item.id] = item.value;
}

}

for (var i = 0, len = extras[0].length; i < len; i++) {
var item = extras[0][i];
if((item.id).localeCompare("pr1notes")==0)   {this[item.id] = item.value;}

}

console.log('starting loop for extras 3...');
for (var i = 0, len = extras[2].length; i < len; i++) {
var item = extras[2][i];

this[item.name] = item.value;

}

};

Protection.prototype.validate = function() {
var result = true;
if (_.isEmpty(this.prdate)
) {result = false;}
return result;
};

Protection.prototype.getSelectFields = function() {
    return ['pr1'];

}

为了在 select 选项上保留我的“5”或“0”值，同时表单选项仍然向用户显示“是”或“否”，我应该更改什么，就像这样： <select name="pr1" id="pr1" onchange="checkTotal()"><option class="item-inner" value="5">No</option><option class="item-inner" value="0">Si</option></select>?

还需要其他任何信息来帮助您理解问题吗？

Answer 1

最简单的解决方案

function init(query){
var protections = JSON.parse(localStorage.getItem("f7Protections"));
if (query && query.id) {
protection = new Protection(_.find(protections, { id: query.id }));
state.isNew = false;
}
else {
protection = new Protection({ isFavorite: query.isFavorite });
state.isNew = true;
}
View.render({ model: protection, bindings: bindings, state: state, doneCallback: saveProtection });

showSelectedValues();
}

function showSelectedValues(){
var fieldNames = protection.getSelectFields();
for (var i = 0, len = fieldNames.length; i < len; i++) {
var itemname =  fieldNames[i];
var selectObj = document.getElementById(itemname);
if (selectObj!=null) {
var objOptions = selectObj.options;
var selIndex=0;
for (var j = 0, len2 = objOptions.length; j < len2; j++) {
if ((objOptions[j].value).localeCompare(protection[itemname])==0){
selIndex=j;
}
}
selectObj.options[selIndex].setAttribute("selected","selected");
}else{
}
}
}

刚刚更改了这一行

if ((objOptions[j].label).localeCompare(protection[itemname])==0){
    selIndex=j;

并将 .label 更改为 .value。

MVC 应用程序不在表单重新编辑中显示选定的值

MVC app does not show selected values on a form reedition

forms

input

select-options