Question

我能够在myField中显示一个行，但我想遍历所有行。我想在html中以格式化文本显示所有名称。我认为在我的HTML视图中使用 for-each 的东西，但我真的卡在这里。

来自couchDB的我的JSON看起来像这样：

{"total_rows":8,"offset":0,"rows":[
 {"id":"f1abbf3ccb0f15d6a66f7eadab003f53","key":"AccessBareBoneApp","value":{"Properties":{"Properties":[]},"Implements":{"Interfaces":[{"TypeName":"ITSR2.Bricks.Access.IAccessBareBoneBrick"},{"TypeName":"ITSR2.Bricks.Access.IAccessAppBrick"}]},"Name":"AccessBareBoneApp","Description":"","TypeName":"ITSR2.Bricks.Access.AccessBareBoneApp","AssemblyName":"ITSR2.Bricks.MSOffice, Version=3.0.0.0, Culture=neutral, PublicKeyToken=null","Obsolete":false}},

我的 main.js 文件：

function ViewModel() {
  var self = this;
  self.myfield =  ko.observableArray([]);

}

var db = new PouchDB('http://localhost:5984/helloworld');

var vm = new ViewModel();

db.query("bricksetup/docs").then(function(result) { 
  var data = result;
  console.log(data);
  data.rows.forEach(function(row){
      vm.data.push(row.value)
  // vm.myfield(data.rows[3].value.Name);
 // vm.myfield2(data.rows[2].value.Name);
  })
   vm.myfield(data.rows[3].value.Name);
});

ko.applyBindings(vm);

我的 index.html ：

      <h3>Brick Infos</h3>
       <div data-bind="">
         <p> 
            <b>Name:</b>
            <span data-bind="text:myfield"></span>
            <b>Description:</b>

            <span data-bind=></span>
            <b>TypeName:</b>
            <span data-bind=></span>
            <b>AssemblyName</b>
            <span data-bind=></span>
            <b>Obsolete</b>
            <span data-bind=></span>
          </p>
          <p data-bind=>
          <b>Name:</b>
            <span data-bind=></span> |
          <b>Validation Type:</b>
            <span data-bind=></span><br>
          </p>
        </div>

Answer 1

你需要在Javascript方面做更多的工作，并假设将有多行，然后将其分配给ko.observableArray。这是self.myfield的用途吗？

假设是，则使用self.myfield(data.rows)之类的东西设置self.myfield。简单而且不需要所有的推动！

在HTML方面，对于每一行，您需要数据绑定，例如

<h3>Brick Infos</h3> <div data-bind="foreach: self.myfield">

我认为这会有效 - 我使用ES6 Javascript所以我不必使用self = this，我只会使用foreach: myfield

html的其余部分没有使用正确的数据绑定语法。每个字段都需要<p><span class="title">Field Title</span><span class=text data-bind="text: data.fieldName"></span></p>

然后创建一个css类以突出显示标题，并将字段标题替换为您希望作为字段标题显示给用户的任何内容，并将Fieldname替换为相关的字段名，例如名称，描述，类型名称等。

注意具有多个值的项目，例如Implements.Interfaces，如果需要，可以使用data-bind=:foreach data.Implements.Interfaces重复这些项目。

Answer 2

您正在推进vm.data，但observableArray字段为myfield。然后，您将observableArray的值设置为一个数据项的Name字段。这是一个非常困惑的方法。

看起来您的查询将返回包含rows的结果，这些结果（或多或少）是您在数组中想要的内容。

db.query("bricksetup/docs").then(function(result) { 
  vm.myfield(result.rows);
});

看起来每行都有一个value对象，而您感兴趣的字段就在其中。

  <h3>Brick Infos</h3>
  <div data-bind="foreach:myfield">
      <b>Name:</b>
      <span data-bind="text:value.Name"></span>
  </div>

这应该让您开始使用最少的代码行。您可能想要重新映射行以将值对象放入myfield。

Answer 3

您只需将data.rows传递给变量myField，就像vm.myfield(data.rows);一样。将它放在console.log下，然后删除forEach循环。

关于Index.html：

<div data-bind="foreach:myfield"> <span data-bind="text:value.Name"></span> </div

希望这有帮助

显示来自couchDb的所有数据以及淘汰赛

3 个答案: