DataBinding MVC视图中的语法错误

Question

在MVC视图中，我使用隐藏字段来数据绑定Question集合，返回以下语法错误：

  

未捕获错误：语法错误，无法识别的表达式：   输入[data-bind ='attr：{name：'Questions ['+ $ index（）+']。ID'，   值：id}']

此代码位于此foreach div

中

  <div id="questions" data-bind="visible: hasQuestions, foreach: { data: questions, afterAdd: afterAdd }">

谢谢，豪尔赫

完整代码：

<form id="survey-form" action="@ViewData["url"]" method="post">
 
  <h4 class="well well-small">
    <button class="btn btn-mini pull-right" data-bind="click: newQuestion">
      <i class="icon-plus"></i> Agregar Pregunta
    </button>
    Preguntas
  </h4>

  <p data-bind="visible: !hasQuestions()">
    <span class="label label-info">Atencion!</span>
    No ha agregado ninguna pregunta
  </p>

  <div id="questions" data-bind="visible: hasQuestions, foreach: { data: questions, afterAdd: afterAdd }">
    <div class="accordion-group">
      <div class="row accordion-heading">
        <div class="span6">
          <a data-parent="#questions" data-bind="attr: { href: '#item'+$index() }">
            <span data-bind="text: inquiry"></span>
          </a>
        </div>
        <div class="span1">
          <span data-bind="text: ismandatory"></span>
        </div>
        <div class="span1">
          <span data-bind="text: typeid"></span>
        </div>
        <div class="span1 accordion-toggle text-center">
          <small class="text-success" data-bind="visible: isActive()">Active</small>
          <small class="text-error" data-bind="visible: !isActive()">Inactive</small>
        </div>
        <div class="span2 accordion-toggle text-right">
          <div class="btn-group">
            <a class="btn btn-small" href="#" data-bind="click: $root.moveUp"><i class="icon-arrow-up"></i></a>
            <a class="btn btn-small" href="#" data-bind="click: $root.moveDown"><i class="icon-arrow-down"></i></a>
          </div>
          <div class="btn-group text-left">
            <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">
              <i class="icon-wrench"></i><span class="caret"></span>
            </button>
            <ul class="dropdown-menu pull-right">
              <li>
                <a href="#" data-bind="click: $root.editQuestion">
                  <i class="icon-pencil"></i> Edit
                </a>
              </li>
              <li data-bind="visible: !isActive()">
                <a href="#" data-bind="click: enable">
                  <i class="icon-ok-circle"></i> Habilitar
                </a>
              </li>
              <li data-bind="visible: isActive">
                <a href="#" data-bind="click: disable">
                  <i class="icon-ban-circle"></i> Deshabilitar
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
	<input type="hidden" data-bind="attr: { name: 'Questions[' + $index() + '].ID', value: id }" />
  </div>

  <div class="form-actions">
    <input class="btn btn-primary" type="submit" value="Guardar Encuesta" />
    <a class="btn" href="@Url.Action("Index")">Cancelar</a>
  </div>

  <div id="add-question" class="modal hide fade" data-bind="with: current">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h3>Agregar Pregunta</h3>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="span3">
          <label for="Title">Pregunta</label>
          <textarea id="inquiry" name="inquiry" data-bind="cleditor: inquiry"></textarea>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal">Close</button>
      <button class="btn btn-primary" data-bind="click: $root.saveQuestion">Save</button>
    </div>
  </div>
  
</form>

js question viewmodel：

var QuestionModel = function() {
var self = this;

self.id = ko.observable(0);
self.inquiry = ko.observable().extend({ required: true });
self.ismandatory = ko.observable().extend({ required: true });
self.priority = ko.observable().extend({ required: true });
self.enabled = ko.observable().extend({ required: true });
self.typeid = ko.observable().extend({ required: true });
self.insdatetime = ko.observable().extend({ required: true });
self.updatetime = ko.observable().extend({ required: true });
self.surveyid = ko.observable().extend({ required: true });

self.isActive = ko.observable(true);

self.activeText = ko.computed(function() {
    return self.isActive() ? "true" : "false";
}, self);

self.isValid = function() {
    return self.inquiry.isValid();
};

self.enable = function() {
    self.isActive(true);
};

self.disable = function() {
    self.isActive(false);
};

self.type = function () {
    if (self.typeid() == 1);
        return "Descriptiva";
    if (self.typeid() == 2);
        return "Multiple";
};

};

js Surver viewmodel：

var SurveyModel = function(data) {
var self = this;

// Properties

self.modal = $('#add-question');
self.questions = ko.observableArray([]);
self.current = ko.observable();

self.hasQuestions = ko.computed(function () {        
    return self.questions().length > 0;
}, self);

self.questionCount = ko.computed(function() {
    return self.questions().length;
}, self);

// Functions
self.newQuestion = function() {
    self.current(new QuestionModel());
    self.modal.modal();
};

self.editQuestion = function(item) {
    self.current(item);
    self.modal.modal();
};

self.saveQuestion = function (item) {
    var index; 
    if (item.isValid()) {
        index = self.questions.indexOf(item);
        if (index >= 0) {
            self.questions.splice(index, 1);
            self.questions.splice(index, 0, item);
        } else {
            self.questions.push(item);
        }

        self.modal.modal('hide');
    }
    else {
        alert('Error: All fields are required!');
    }
};

self.moveUp = function (item) {
    var currIndex = self.questions.indexOf(item),
        prevIndex = currIndex - 1;

    if (currIndex > 0) {
        self.questions.splice(currIndex, 1);
        self.questions.splice(prevIndex, 0, item);
    }
};

self.moveDown = function(item) {
    var currIndex = self.questions.indexOf(item),
        nextIndex = currIndex + 1,
        lastIndex = self.questions().length - 1;

    if (currIndex < lastIndex) {
        self.questions.splice(currIndex, 1);
        self.questions.splice(nextIndex, 0, item);
    }
};

// Callbacks

self.afterAdd = function(elem) {
    var el = $(elem);
    if (elem.nodeType === 1) {
        el.before("<div/>");
        el.prev()
            .width(el.innerWidth())
            .height(el.innerHeight())
            .css({
                "position": "absolute",
                "background-color": "#ffff99",
                "opacity": "0.5"
            })
            .fadeOut(500);
    }
};

// Initialize

if (data != null) {
    for (var i = 0; i < data.Questions.length; i++) {
        var q = new QuestionModel();
        q.id(data.Questions[i].ID);
        q.inquiry(data.Questions[i].Inquiry);
        q.ismandatory(data.Questions[i].IsMandatory);
        q.priority(data.Questions[i].Priority);
        q.enabled(data.Questions[i].Enable);
        q.isActive(data.Questions[i].IsActive);
        q.typeid(data.Questions[i].TypeId);
        q.insdatetime(data.Questions[i].InsDateTime);
        q.updatetime(data.Questions[i].UpDateTime);
        q.surveyid(data.Questions[i].SurveyId);
        self.questions.push(q);
    }
}

return self;

};