Question

我正在尝试做的“工作”副本如下所示，我只是希望能够在数组中添加或编辑数据，但我必须执行$('#examQuestion').val()之类的操作。

这似乎更像是一个黑客。

我认为通过数据链接有一个简单的解决方案，我只是不确定如何解决这个问题。

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>test</title>
</head>
<body>

<div id="main"></div>

<script id="newTmpl" type="text/x-jsrender">
    <table width="100%">
        <thead>
            <th>Question</th>
            <th>Questoin Type</th>
            <th>Actions</th>
        </thead>
        <tbody>
            <tr>
                <td>
                    <textarea placeholder="Exam Question" rows="10" id="examQuestion" name="examQuestion" cols="50"></textarea>
        </td>
                <td>
                    <select id="examQuestionType" name="examQuestionType"><option value="0" selected="selected">-- Please select question type --</option><option value="1">Radio Button</option><option value="2">Checkbox</option><option value="3">Textarea</option><option value="4">Text</option></select>
        </td>
                <td>
                    <button class="addOrUpdateQuestion" type="button">Add / update</button>
        </td>
            </tr>
            {^{for questions}}
                <tr>
                    <td>
                        {{:question}}
                    </td>
                    <td>
                        {{:typeName}}
                    </td>
                    <td>
                        <button class="editQuestion" type="button">Edit</button>
          </td>
                </tr>
            {{/for}}
        </tbody>
    </table>
</script>

  <script src="jquery.js"></script>
  <script src="jsviews.min.js"></script>
  <script>
    $(function() {
      var question = [];

      var app = {
        name: '',
        description: '',
        selectedQuestionId: -1,
        questions: question
      };

      var tmpl = $.templates("#newTmpl");
      tmpl.link("#main", app);

      $('#main').on('click', '.editQuestion', function() {
        var tmpData = $.view(this).data
        app.selectedQuestionId = $.view(this).index;
        $('#examQuestion').val(tmpData.question);
        $('#examQuestionType').val(tmpData.type);
      });

      $('#main').on('click', '.addOrUpdateQuestion', function() {
        if (app.selectedQuestionId == -1) {
          $.observable(question).insert({
            question: $('#examQuestion').val(),
            type: $('#examQuestionType').val(),
            typeName: $('#examQuestionType').find(':selected').text()
          });
        } else {
          var tmpItem = app.questions[app.selectedQuestionId];
          tmpItem.question = $('#examQuestion').val();
          tmpItem.type = $('#examQuestionType').val();
          tmpItem.typeName = $('#examQuestionType').find(':selected').text();
          app.questions[app.selectedQuestionId] = tmpItem;
          $.observable(question).refresh(question);
        }
      });
    });
  </script>
</body>
</html>

Answer 1

很明显，JsViews就是在模型发生变化时自动更新UI！只有模型可以是原始数据 - 例如，来自JSON请求的原始对象图，并且不必使用特定类型映射到特定的MVVM类。（在此回应上面关于使用Knockout的评论 - 这需要特定的包装器）。也就是说，JsViews也适用于MVVM包装器。

所以这是您的示例http://jsfiddle.net/BorisMoore/F9WF6/3/

的修改版本

需要注意的重要事项：所有数据链接都使用数据链接属性或{^{... - 您的示例中缺少这些属性。

BTW：data-link="selectedQuestion^type"是深度链接的一个示例，因此当selectedQuestion切换到另一个时，以及当前selectedQuestion的type属性发生更改时，它都会更新。有关详情，请参阅http://www.jsviews.com/#observe - 谈论叶子更改或深度更改。

<tr>
  <td>
    <textarea data-link="selectedQuestion^question" placeholder="Exam Question" rows="10" name="examQuestion" cols="20"></textarea>
  </td>
  <td>
    <select data-link="selectedQuestion^type" name="examQuestionType">
      <option value="" selected="selected">-- Please select question type --</option>
      <option value="1">Radio Button</option>
      <option value="2">Checkbox</option><option value="3">Textarea</option>
      <option value="4">Text</option>
    </select>
  </td>
  <td>
    <button data-link="disabled{:selectedQuestion !== newQuestion || !selectedQuestion.question || !selectedQuestion.type}"
       class="add" type="button">Add</button>
    <button class="new" type="button">New</button>
  </td>
</tr>
{^{for questions}}
  <tr>
    <td>
      {^{:question}}
    </td>
    <td>
      {^{:~typeName(type)}}
    </td>
    <td>
      <button class="editQuestion" type="button">Edit</button>
    </td>
  </tr>
{{/for}}

代码简化为以下内容：

$('#main').on('click', '.editQuestion', function() {
  $.observable(app).setProperty("selectedQuestion", $.view(this).data);
});

$('#main').on('click', '.add', function() {
  $.observable(question).insert({
    question: newQuestion.question,
    type: newQuestion.type
  });
  $.observable(newQuestion).setProperty({ question: "", type: ""});
});

$('#main').on('click', '.new', function() {
  $.observable(app).setProperty("selectedQuestion", newQuestion);
});

查看以下显示主要细节编辑的示例 - 因此与您的相关场景相对应：http://www.jsviews.com/#samples/editable

顺便说一下，MVVM和使用视图模型类的很多样本将很快就会出现。但与此同时，这是一个尚未在jsviews.com网站上公开曝光的链接：http://www.jsviews.com/#explore/objectsorvm

如何使用数据链接添加或编辑数组中的数据？

1 个答案: