显示来自 couchDb 的所有数据并剔除答案

【问题标题】：Display all data from couchDb with knockout显示来自 couchDb 的所有数据并剔除
【发布时间】：2016-06-24 01:54:18
【问题描述】：

我可以在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>

【问题讨论】：

标签： javascript html knockout.js couchdb pouchdb

【解决方案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 类来突出显示标题，并将 Field Title 替换为您希望向用户显示的任何内容作为字段的标题，并将 Fieldname 替换为相关的字段名，例如名称、描述、类型名称等。

注意可能具有多个值的项目，例如 Implements.Interfaces 使用 data-bind=:foreach data.Implements.Interfaces 在页面上根据需要重复这些项目。

【讨论】：

你不能用data-bind="foreach: data.Implements.Interfaces"显示嵌套项的值

【解决方案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。

【讨论】：

我收到一个错误Uncaught (in promise) TypeError: vm.myField is not a function(…)。
myfield 中没有大写 F。我提供的代码与您接受的答案相同。

【解决方案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

希望对你有帮助

【讨论】：